EasyUi之datagird解讀

時間 2019-12-08

標籤 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框架才能支持良好的分頁顯示。json

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='#' 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");dom

2.datagird的reload方法和load方法均爲刷新表格其區別在於，reload方法會默認停留在當前頁面，load方法會跳轉到初始化頁面。ui

3.對於前面出現複選框，使用checkbox="true"。編碼

4.對於每個行，都有一個能夠格式化方法url

JavaScript Code

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

其中value爲字段值，row爲當前行記錄，index爲當前行索引。spa

5.加了pagination 分頁欄後，每次報文都會傳遞2個變量：orm