EasyUi之datagird解读-CSDN博客

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 = "\<a href='#' οnclick='clickRowEditBtn(" + index + "\);return false;'\>编辑</a>" ;
                         var deleteStr = "\<a href='#' οnclick='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.对于每一个行，都有一个可以格式化方法