EasyUI学习笔记

学习链接：http://www.jeasyui.net/tutorial

1.CRUD的实现-不使用可编辑的datagrid

(1) 使用到的插件：

• datagrid：向用户展示列表数据。
• dialog：创建或编辑一条单一的用户信息。
• form：用于提交表单数据。
• messager：显示一些操作信息。

(2) 查询的实现使用datagrid进行结果显示，与其关联的url及后端的处理器方法负责从数据库中检索数据，并转为json格式返回。

(3) 新建和编辑一条记录的实现使用同一个dialog，这个dialog包含一个form，form提交数据的url需根据新建或编辑动态设置，从而当点击dialog的save按钮时form数据被提交到不同的url进行处理。当点新建按钮时，需清空form数据；当点击编辑按钮时，需加载选定的数据行到form中。

(4) 当点击删除按钮时，弹出一个消息框提示用户确认是否删除，如果是则获取选择数据的id post到后端的url进行删除处理。

2.CRUD的实现-使用可编辑的datagrid

（1）为可编辑列提供editor属性；

（2）提供new、save、cancel、destroy四个按钮和相应的onclick事件处理，

（3）提供 'url'、'saveUrl'、'updateUrl' 和 'destroyUrl' 属性来编辑数据网格（DataGrid），并提供相应的后端处理方法。

3.表单验证

（1）在<input>标签中使用easyui-validatebox的class属性；

（2）使用required和validType等属性指定校验规则；

（3）在表单提交时指定onSubmit事件发生时做表单验证。

4.分页

（1）定义数据网格（datagrid）列，并设置 'pagination' 属性为 true，它将在数据网格（datagrid）的底部生成一个分页（pagination）工具栏。pagination将发送两个参数到服务器：

• page：页码，起始值 1。
• rows：每页显示行。

（2）后端service根据查询条件和分页条件获取数据：total:未分页的记录总数，rows：分页查询结果。

一、后端获取分页数据的一般方法

a.根据查询条件（不加分页条件）构造count(*) sql语句查询出total

b.根据查询条件和分页条件构造另一个sql语句查询出分页结果rows

二、利用PageHelper获取分页数据

a.调用PageHelper.startPage，传入前端发送的参数page和rows，开始分页；

b.根据查询条件（不加分页条件）查询出结果resultList;

c.根据查询结果构造PageInfo<?>实例，即为分页结果。

（3）后端conctoller将service查询出的total和rows转为json结果返回前端datagrid.