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 

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

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

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

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

其他再补充。。。。