EasyUI学习笔记7：MIS开发利器_ datagrid插件(中)

摘要 使用datagrid实现数据列表和CRUD操作，并实现与后台action交互，支持后台分页与排序。。
easyui

datagrid
dialog
form

目录[-]

一、引言
二、数据管理对话框
三、添加和修改操作
1. 添加操作
2. 修改操作
3. 保存数据
四、删除和刷新操作
1. 删除操作
2.刷新操作

一、引言

上篇笔记我们已经新建了datagrid，并能够读取本地json数据。表格上方有工具栏，有添加、修改、删除、刷新4个按钮。表格下方有分页栏。本篇将给这些按钮添加事件。

二、数据管理对话框

首先，我们需要一个对数据进行管理的对话框，那对话框放在哪个页面呢？

开发MIS系统中一般有两种方案：一是数据列表(包括删除操作)和数据管理(添加和修改)在一个页面，另一种数据列表和数据管理各建一个页面。分开的话职责相对清晰，代码也不用堆在一起，但会涉及到页面跳转和传递数据的问题，交互复杂点。

作为一个小白笔记，我们这里采用前者。

在customer.html中添加如下div

?
对话框需要用到easyui-dialog插件。必要解释如下：

(1) closed用来定义该对话框默认是关闭的。也就是说，虽然这段div在页面上，但运行时其实是看不见的。

(2) easyui-validatebox插件可以让我们非常轻松地对文本输入框进行格式校验。比如这里的required属性表示是否可以为空，true代表必填字段。

(3)
请恕我啰嗦，代码中id诸如form、dialog、gird等一定要与js中#form，#dialog，#grid等一定要相同。

(4)
咦，怎么没有“保存”和“取消”那两个按钮。别着急，我们使用js代码实现的。

显示对话框的js代码如下：

?
我们将显示对话款封装成了一个函数，参数是title。显示对话框其实是不用参数的，即

$("#dialog").dialog('open');

那封装的方法为什么要设参数呢？因为添加操作和修改操作我们是用同一个对话框，这样可以让它根据操作不同显示不同标题。

modal属性学过swing同学都知道啦，设为true就是有模对话框，显示时就无法激活其他页面。两个按钮调用的方法分别是保存数据和关闭对话框。关闭对话框方法实现，其实就2句：

?
至于保存数据方法实现，请稍等片刻，和添加、修改操作一起奉上。

三、添加和修改操作

1. 添加操作

直接上js代码：

?
显示对话框，标题为“添加客户”，清空表单数据。

customer!add.action（下篇奉上）是后台struts添加数据操作地址，这里改成你的服务器数据操作地址就可以了。

这里出现了一个新的easyui插件，form表单插件。

2. 修改操作

还是先贴代码：

?
修改操作稍微复杂点，解释如下：

首先调用datagrid的getSelected方法选择一行。注意，如果采用这样的交互方式，建议把datagrid的singleSelect 属性设为true，代表最多只能选一行。把这一行数据存在row中。最爽的就是接下来这句了$("#form").form('load', row)。一句就能把数据加载到对话框里，想当年我们用jsp的时候…….不堪回首

3. 保存数据

依旧先上代码：

?
这个好像更为复杂点。

查看http://www.jeasyui.net/表单插件如何提交数据。copy三段示例代码：

去做一个提交动作

?
通过额外的参数提交

?
现在在 'success' 回调函数中处理 JSON 字符串。

?
相信对照API你已经懂得七七八八了，不再解释。再次强调，看官方的api、教程、demo是灰常灰常灰常重要。

四、删除和刷新操作

1. 删除操作

依旧直接上代码：

?
后台删除数据需要传一个id，即所选行的row.id。其余不解释。我已经越来越懒了，版式都懒得排了，可见我是一个极度缺乏耐心的人。

2.刷新操作

上述代码经常能看到一句，reload()。这是什么？这其实是自己封装的，作用刷新页面。其实就一句，脱裤子放P，一句你还封装。其实还是有必要的，为刷新按钮服务，我有对称强迫症，必须一个按钮调用一个方法。

?
伸个懒腰，easyui的笔记终于临近尾声了，最后一篇就是与ssh的struts的action交换数据了。