EasyUI的DataGrid绑定Json数据源

EasyUI给表格绑定数据是最常用的方法，小编分享一下总结出来的两种绑定表格方法，知识在于积累。

第一种：数据存放在数据集中，每一行对应多个值，利用循环把数据绑定到表格

前台代码：

[html]  view plain  copy

1. <span style="font-size:18px;"><table id="dg" class="easyui-datagrid" style="width:100%;height:100%;" title="需要设置表格标题"  data-options="  
2.                 rownumbers:true,  
3.                 singleSelect:true,  
4.                 @*autoRowHeight:false,*@  
5.                 pagination:true  
6.                 @*pageSize:10*@">  
7.             <thead>  
8.                 <tr>  
9.                     <th field="colum1">列1</th>  
10.                     <th field="colum2">列2</th>  
11.                     <th field="colum3">列3</th>  
12.                     <th field="colum4">列4</th>  
13.                     <th field="colum5">列5</th>  
14.                     <th field="colum6">列6</th>  
15.                 </tr>  
16.             </thead>  
17.         </table></span>  

JS代码：

[javascript]  view plain  copy

1. <span style="font-size:18px;">(function ($) {  
2.     function pagerFilter(data) {  
3.         if ($.isArray(data)) {  // is array  
4.             data = {  
5.                 total: data.length,  
6.                 rows: data  
7.             }  
8.         }  
9.         var target = this;  
10.         var dg = $(target);  
11.         var state = dg.data('datagrid');  
12.         var opts = dg.datagrid('options');  
13.         if (!state.allRows) {  
14.             state.allRows = (data.rows);  
15.         }  
16.         if (!opts.remoteSort && opts.sortName) {  
17.             var names = opts.sortName.split(',');  
18.             var orders = opts.sortOrder.split(',');  
19.             state.allRows.sort(function (r1, r2) {  
20.                 var r = 0;  
21.                 for (var i = 0; i < names.length; i++) {  
22.                     var sn = names[i];  
23.                     var so = orders[i];  
24.                     var col = $(target).datagrid('getColumnOption', sn);  
25.                     var sortFunc = col.sorter || function (a, b) {  
26.                         return a == b ? 0 : (a > b ? 1 : -1);  
27.                     };  
28.                     r = sortFunc(r1[sn], r2[sn]) * (so == 'asc' ? 1 : -1);  
29.                     if (r != 0) {  
30.                         return r;  
31.                     }  
32.                 }  
33.                 return r;  
34.             });  
35.         }  
36.         var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);  
37.         var end = start + parseInt(opts.pageSize);  
38.         data.rows = state.allRows.slice(start, end);  
39.         return data;  
40.     }  
41.   
42.     var loadDataMethod = $.fn.datagrid.methods.loadData;  
43.     var deleteRowMethod = $.fn.datagrid.methods.deleteRow;  
44.     $.extend($.fn.datagrid.methods, {  
45.         clientPaging: function (jq) {  
46.             return jq.each(function () {  
47.                 var dg = $(this);  
48.                 var state = dg.data('datagrid');  
49.                 var opts = state.options;  
50.                 opts.loadFilter = pagerFilter;  
51.                 var onBeforeLoad = opts.onBeforeLoad;  
52.                 opts.onBeforeLoad = function (param) {  
53.                     state.allRows = null;  
54.                     return onBeforeLoad.call(this, param);  
55.                 }  
56.                 var pager = dg.datagrid('getPager');  
57.                 pager.pagination({  
58.                     onSelectPage: function (pageNum, pageSize) {  
59.                         opts.pageNumber = pageNum;  
60.                         opts.pageSize = pageSize;  
61.                         pager.pagination('refresh', {  
62.                             pageNumber: pageNum,  
63.                             pageSize: pageSize  
64.                         });  
65.                         dg.datagrid('loadData', state.allRows);  
66.                     }  
67.                 });  
68.                 $(this).datagrid('loadData', state.data);  
69.                 if (opts.url) {  
70.                     $(this).datagrid('reload');  
71.                 }  
72.             });  
73.         },  
74.         loadData: function (jq, data) {  
75.             jq.each(function () {  
76.                 $(this).data('datagrid').allRows = null;  
77.             });  
78.             return loadDataMethod.call($.fn.datagrid.methods, jq, data);  
79.         },  
80.         deleteRow: function (jq, index) {  
81.             return jq.each(function () {  
82.                 var row = $(this).datagrid('getRows')[index];  
83.                 deleteRowMethod.call($.fn.datagrid.methods, $(this), index);  
84.                 var state = $(this).data('datagrid');  
85.                 if (state.options.loadFilter == pagerFilter) {  
86.                     for (var i = 0; i < state.allRows.length; i++) {  
87.                         if (state.allRows[i] == row) {  
88.                             state.allRows.splice(i, 1);  
89.                             break;  
90.                         }  
91.                     }  
92.                     $(this).datagrid('loadData', state.allRows);  
93.                 }  
94.             });  
95.         },  
96.         getAllRows: function (jq) {  
97.             return jq.data('datagrid').allRows;  
98.         }  
99.     })  
100. })(jQuery);</span>  

[javascript]  view plain  copy

1. <span style="font-size:18px;">    $.ajax({  
2.         type: "get",   //AJAX提交方式  
3.         url: "路径",  
4.         datatype: "json",  
5.         data: "userid=" + "id"+ "&username=" + "name",    //向后台传递参数，无需传递参数就可以删除  
6.         success: function (data) {  
7.             var rows = [];  
8.              
9.             for (var i = 0; i < data.length; i++) {      //data是返回值的集合  
10.                 rows.push({                              //把data数据对应的值压到rows对应数组中  
11. <span style="white-space:pre">      </span>    colum1: data[i].userid,  
12.                     colum2: data[i].leve,  
13.                     colum3: data[i].Username,  
14.                     colum4: data[i].Tel,  
15.                     colum5: data[i].Mail,  
16.                     colum6: data[i].Explain  
17.                 });  
18.             }  
19.             $('#dg').datagrid({ data: rows }).datagrid('clientPaging');  
20.         }, error: function () {                       //执行出错时执行的方法  
21.             $.messager.alert("操作提示", "表格失败，请联系管理员！", "warning");  
22.         }  
23.     });</span>  

需要绑定表格时调用AJAX方法，AJAX执行完后会自动调用显示数据方法，表格数据就显示出来了

第二种：直接在前台和JS设置好列名，自动绑定

前台代码：

[html]  view plain  copy

1. <span style="font-size:18px;">           <table id="dg" class="easyui-datagrid" title="需要显示表格标题 " data-options="                  
2.                 rownumbers:true,  
3.                 singleSelect:true,  
4.                 autoRowHeight:false,  
5.                 pagination:true,  
6.                 ">  
7.                 <thead>  
8.                     <tr>  
9.                         <th data-options="field:'colum1',align:'center'">列名1</th>  
10.                         <th data-options="field:'colum2',align:'center'">列名2</th>  
11.                         <th data-options="field:'colum3',align:'center'">列名3</th>  
12.                         <th data-options="field:'colum4',align:'center'">列名4</th>  
13.                         <th data-options="field:'colum5',align:'center'">列名5</th>  
14.                         <th data-options="field:'colum6',align:'center'">列名6</th>  
15.                     </tr>  
16.                 </thead>  
17.             </table></span>  

JS代码：

[javascript]  view plain  copy

1. <span style="font-size:18px;">    $('#dg').datagrid({  
2.         url: '路径?Name=' + Name + "&combox=" + combox,   //设置访问后台路径和传递参数，如果没有参数可以删除  
3.         dataType: 'json',  
4.         width: "100%", //宽度  
5.         striped: true, //把行条纹化（奇偶行背景色不同）  
6.         idField: 'quesID', //标识字段  
7.         loadMsg: '正在加载用户的信息.......', //从远程站点加载数据是，显示的提示消息  
8.         pagination: true, //数据网格底部显示分页工具栏  
9.         singleSelect: false, //只允许选中一行  
10.         pageList: [10, 20, 30, 40, 50], //设置每页记录条数的列表  
11.         pageSize: 10, //初始化页面尺寸（默认分页大小）  
12.         pageNumber: 1, //初始化页面（默认显示第一页）  
13.         beforePageText: '第', //页数文本框前显示的汉字   
14.         afterPageText: '页 共 {pages} 页',  
15.         displayMsg: '第{from}到{to}条，共{total}条',  
16.         columns: [[ //每页具体内容  
17.                     { field: 'colum1', title: '标题1', width: "13%", align: 'center', editor: 'text' },  
18.                     { field: 'colum2', title: '标题2', width: "13%", align: 'center', editor: 'text' },  
19.                     { field: 'colum3', title: '标题3', width: "13%", align: 'center', editor: 'text' },  
20.                     { field: 'colum4', title: '标题4', width: "13%", align: 'center', editor: 'text' },  
21.                     { field: 'colum5', title: '标题5', width: "13%", align: 'center', editor: 'text' },  
22.                     { field: 'colum6', title: ' 标题6 ', width: "13%", align: 'center', editor: 'text' },  
23.         ]],  
24.   
25.         onLoadSuccess: function (data) {  
26.   
27.            //表格加载成功后执行的代码，如果不需要可以删除  
28.         }  
29.     })  
30. </span>