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",                      200,                     editor: "text"   //用此来标识当前文本框是文本。                 }, {                     field: "stuName",                     title: "姓名",                     align: "center",                      200,                     editor: "text"                 }, {                     field: "birth",                     title: "生日",                     align: "center",                      200,                     editor: "text"                 }, {                     field: "stuClass",                     title: "班级",                     align: "center",                      200,                     editor: "text",                     //EasyUi的复合对象必须通过formmater处理。                     formatter: function (value) {                          return value.className;                     }                 }, {                     field: "edit",                     title: "编辑",                     align: "center",                      200,                     formatter: function (value, row, index) {                         var editStr = "<a href='#' onclick='clickRowEditBtn(" + index + ");return false;'>编辑</a>";                         var deleteStr = "<a href='#' onclick='deleteStuOnRowBtn(" + index + ");return false;'>删除</a>";                         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表示页面容量。后台需要接收并进行处理。

其他再补充。。。。