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表示页面容量。后台需要接收并进行处理。

其他再补充。。。。

 

你可能感兴趣的:(EasyUi之datagird解读)