详谈easyui datagrid增删改查操作

转自：http://blog.csdn.net/abauch_d/article/details/7734395

前几天我把easyui dadtagrid的增删改查的实现代码贴了出来，发现访问量达到100多，那次由于匆忙，只把代码贴出来而已，看到有这么多的朋友想学这个框架，今天我就试着跟大家一起来探讨一下这个datagrid吧

1、首先是datagrid的数据展示：

我的做法是在页面中定义了表格的字段名称，代码如下：（当然这里还有别的方法，大多数的做法是在页面中放一个table节点，然后在js文件中定义表格的字段等等属性）

<table id="tt">
     <thead>
    <tr>
    <th field="id" width="80" >读者ID</th>
    <th field="name" width="100" >读者姓名</th>
    <th field="sex" width="80" >性别</th>
    <th field="type" width="80" >类型</th>
    <th field="email" width="80" >邮箱</th>
    <th field="company" width="150">单位</th>
    <th field="status" width="60">状态</th>
    </tr>
    </thead>
    </table>

写脚本文件：

$(function() {

//设置datagrid
  var lastIndex;
  
 $('#tt').datagrid({
   width : 750,
   height : 350,
   //pageSize:5,
   pageList : [ 5, 10, 15, 20 ],
   pageSize:10,
   nowrap : false,
   striped : true,
   collapsible : true,
   url : '../datagrid/test.action',
   loadMsg : '数据装载中......',
   sortName : 'code',
   sortOrder : 'desc',
   idField : 'id',
   remoteSort : false,
   pagination : true,
   rownumbers : true,
   frozenColumns : [ [ {
    field : 'ck',
    checkbox : true
   } ] ],            
   toolbar : [ {
    text : '添加',
    iconCls : 'icon-add',
    handler : function(){
      $('#add').window('open');
         $('#fs').show();
         $('#fs').form('clear');
         $('#fs').appendTo('#aa');
    }
   }, '-', {
    text : '删除',
    iconCls : 'icon-remove',
    handler : del
   }, '-', {
    text : '保存',
    iconCls : 'icon-save',
    handler : function() {
     $('#tt').datagrid('acceptChanges');
    }
   }, '-', {
    text : '修改',
    iconCls : 'icon-edit',
    handler : getSelect
   }, '-', {
    text : '查询',
    iconCls : 'icon-search',
    handler : function() {
     $('#query').window('open');
    }
   }, '-', {
    text : '撤销',
    iconCls : 'icon-undo',
    handler : function() {
     $('#tt').datagrid('rejectChanges');
    }
   } ],
   onBeforeLoad : function() {
    $(this).datagrid('rejectChanges');
   }
  });

红色部分中，最重要的是url，大家看这个名称也知道，这是从后台获取到数据的地址，之前自己刚开始在学这个框架的时候在网上找了很多例子

很多网友只是说了这是个获取数据的地址，但是后台到底怎么返回数据给前端，大家都没怎么提到，在这里我就将我的方法跟大家分享一下，我是基于ssh框架开发的，所

以这个地址其实就是指向到struts2的一个action处理程序，在该action中我获取数据库的数据，至于怎么获取数据，相信大家应该都会了，这里我们重点讲一下后台是返回

什么样的数据给前端，然后显示在datagrid中：其实后台返回的数据是一个json格式的字符串，格式大致是这样的

{"total":28,"rows":[
 {"id":"FI-SW-01","sex":"fale"},
 {"id":"K9-DL-01","sex":"male"}
 ]}

返回的json字符串很像是键值对，每个键的名称都必须与之前table定义的字段名一致，这是在datagrid展示数据的保证，所以大家想要返回什么样的数据都可以通过自己构造

json字符串来返回给前端。

至于toolbar，就是一个工具栏，里面定义了许多按钮，添加，删除，修改等等，handler这是当点击该按钮时触发的事件。

2、然后是增删改查的操作

其实大家只要明白对数据进行增删改查操作只要能够将想要操作的那一条或一组数据获取到，然后传值到后台，再交由后台执行对数据库的操作就行了，

所以在这里关键是如何获取到datagrid的数据

添加操作的话，我的上一篇文章有把代码贴出来了，其实就是当点击添加按钮，就弹出一个子窗口，然后填入信息后提交到后台action处理，由于用的是strust2，所以连参数

都不用直接传递了，直接让action以它里面定义的变量去页面寻找对应的值并赋值就可以了，这个比较简单，我就不多说了

然后是修改操作，具体的代码由于之前都贴出来了，现在就不再复制在这里了。修改前要做的就是获取到你要修改的数据，这可以由$('#tt').datagrid('getSelected')这条语句来

实现，它是获取datagrid中被选中行的记录，然后只要把该行的数据展示出来，让用户去修改，然后再像添加一样提交到actioin中就可以了

删除操作，删除操作也比较简单，只需要取到选中的记录的ID号并提交到后台就行了

查询操作，获取到要查询的信息后，提交到后台，然后只要像显示数据那样构造返回到前端的json字符串就行了

以上这些希望能够帮到大家，针对我的做法有什么建议的或者有哪些不对的也请赐教。