初见jQuery EasyUI

Posted 2020-09-06 天马行空

本文通过一个简单的小例子，简述jQuery EasyUI的使用方法，仅供学习分享使用，如有不足之处，还请指正。

什么是jQuery EasyUI ?

引用官网的一句话：jQuery EasyUI framework helps you build your web pages easily。其特点就就快速，灵活，简单。

本文借助自己的第一个B/S系统，简述一下jQuery EasyUI的相关功能。【本文采用纯前端处理，不涉及后台数据库，列表中数据是从Json文件中读取】

涉及知识点

【每一个知识点都是一个组件】：

• dialog 一种特殊类型的窗口，扩展自window
• layout 布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的
• tree 树控件在web页面中一个将分层数据以树形结构进行显示
• tabs 选项卡显示一组Panel
• datagrid DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持
• validatebox validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。主要是客户端验证
• linkbutton 按钮组件使用超链接按钮创建

效果图

具体如下图所示：

【登录框】

【后台管理页面】

【列表框】

【新增窗口】Modal窗口

-----------------------------------------------------------------------------

备注：jQuery EaysUI的功能还有很多，可以进行常见的功能开发，是一款很不错的轻量级组件。