EasyUi之datagird解读

1.其json格式需要为：

 JSON Code 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

{      "total" :  14 ,      "rows" : [         {              "birth" :  "1996-10-12" ,              "id" :  71 ,              "stuClass" : {                  "className" :  "Java1班" ,                  "id" :  3             },              "stuName" :  "刘德华3"         },         {              "birth" :  "1996-10-12" ,              "id" :  69 ,              "stuClass" : {                  "className" :  "BB2班" ,                  "id" :  1             },              "stuName" :  "刘德华2"         }     ] }

 

特别注意的是：一定要带有total，这样前端的EasyUI的datagrid框架才能支持良好的分页显示。

2.初始化datagrid代码如下

 JavaScript Code 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81

$( "#dg" ).datagrid({             title:  "学生表格" ,             fitColumns:  true ,             url:  "<%=basePath%>/json/stu_stuList.action" ,             loadMsg:  "加载中...." ,             // idField: "id", //加了idField一刷新那么之前所有选的还会存在。             stripped:  true ,  //表格中呈现编码纹路。             rownumbers:  true ,             pagination:  true ,             pageSize:  5 ,             pageList: [ 5 ,  10 ,  15 ,  20 ],             pageNumber:  1 ,             singleSelect:  true ,             toolbar: [{                 iconCls:  "icon-add" ,                 text:  "添加新用户" ,                 handler:  function  () {                     showFormOnAdd();                 }             }, {                 iconCls:  "icon-edit" ,                 text:  "编辑用户" ,                 id:  "editUser" ,                 handler:  function  () {                     showFormOnEdit();                 }             }, {                 iconCls:  "icon-remove" ,                 text:  "删除所选" ,                 id:  "deleteUser" ,                 handler:  function  () {                     deleteStuOnTopBtn();                 }             }],              //columns是二维数组哈，这点特别注意了。             columns: [[                 {                     field:  "field" ,                     checkbox:  true                 }, {                     field:  "id" ,                     title:  "编号" ,                     align:  "center" ,                     width:  200 ,                     editor:  "text"     //用此来标识当前文本框是文本。                 }, {                     field:  "stuName" ,                     title:  "姓名" ,                     align:  "center" ,                     width:  200 ,                     editor:  "text"                 }, {                     field:  "birth" ,                     title:  "生日" ,                     align:  "center" ,                     width:  200 ,                     editor:  "text"                 }, {                     field:  "stuClass" ,                     title:  "班级" ,                     align:  "center" ,                     width:  200 ,                     editor:  "text" ,                      //EasyUi的复合对象必须通过formmater处理。                     formatter:  function  (value) {                           return  value.className;                     }                 }, {                     field:  "edit" ,                     title:  "编辑" ,                     align:  "center" ,                     width:  200 ,                     formatter:  function  (value, row, index) {                          var  editStr =  "\  + index +  "\);return false;'\>编辑" ;                          var  deleteStr =  "\  + index +  "\);return false;'\>删除" ;                          return  editStr +  " "  + deleteStr;                     }                 }             ]]         });     });

说明：

1.easyui中调用某个空间的方法，是现将那个dom元素转化为easyui对象才能调用比如说：$("#dg").datagrid("reload");

2.datagird的reload方法和load方法均为刷新表格其区别在于，reload方法会默认停留在当前页面，load方法会跳转到初始化页面。

3.对于前面出现复选框，使用checkbox="true"。

4.对于每一个行，都有一个可以格式化方法

 JavaScript Code 

1

formatter:  function (value,row,index){   }

其中value为字段值，row为当前行记录，index为当前行索引。

5.加了pagination 分页栏后，每次报文都会传递2个变量：

 

如上图：poge和rows，其中page表示当前所在页，rows表示页面容量。后台需要接收并进行处理。

其他再补充。。。。