使用EasyUI如何绑定Json数据源

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

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

前台代码：

<table id="dg" class="easyui-datagrid" style="width:100%;height:100%;" title="需要设置表格标题" data-options=" 
 rownumbers:true, 
 singleSelect:true, 
 @*autoRowHeight:false,*@ 
 pagination:true 
 @*pageSize:10*@"> 
 <thead> 
 <tr> 
 <th field="colum1">列1</th> 
 <th field="colum2">列2</th> 
 <th field="colum3">列3</th> 
 <th field="colum4">列4</th> 
 <th field="colum5">列5</th> 
 <th field="colum6">列6</th> 
 </tr> 
 </thead> 
 </table>

JS代码：

(function ($) { 
 function pagerFilter(data) { 
 if ($.isArray(data)) { // is array 
 data = { 
 total: data.length, 
 rows: data 
 } 
 } 
 var target = this; 
 var dg = $(target); 
 var state = dg.data('datagrid'); 
 var opts = dg.datagrid('options'); 
 if (!state.allRows) { 
 state.allRows = (data.rows); 
 } 
 if (!opts.remoteSort && opts.sortName) { 
 var names = opts.sortName.split(','); 
 var orders = opts.sortOrder.split(','); 
 state.allRows.sort(function (r1, r2) { 
 var r = 0; 
 for (var i = 0; i < names.length; i++) { 
 var sn = names[i]; 
 var so = orders[i]; 
 var col = $(target).datagrid('getColumnOption', sn); 
 var sortFunc = col.sorter || function (a, b) { 
 return a == b ? 0 : (a > b ? 1 : -1); 
 }; 
 r = sortFunc(r1[sn], r2[sn]) * (so == 'asc' ? 1 : -1); 
 if (r != 0) { 
 return r; 
 } 
 } 
 return r; 
 }); 
 } 
 var start = (opts.pageNumber - 1) * parseInt(opts.pageSize); 
 var end = start + parseInt(opts.pageSize); 
 data.rows = state.allRows.slice(start, end); 
 return data; 
 } 
 
 var loadDataMethod = $.fn.datagrid.methods.loadData; 
 var deleteRowMethod = $.fn.datagrid.methods.deleteRow; 
 $.extend($.fn.datagrid.methods, { 
 clientPaging: function (jq) { 
 return jq.each(function () { 
 var dg = $(this); 
 var state = dg.data('datagrid'); 
 var opts = state.options; 
 opts.loadFilter = pagerFilter; 
 var onBeforeLoad = opts.onBeforeLoad; 
 opts.onBeforeLoad = function (param) { 
 state.allRows = null; 
 return onBeforeLoad.call(this, param); 
 } 
 var pager = dg.datagrid('getPager'); 
 pager.pagination({ 
 onSelectPage: function (pageNum, pageSize) { 
 opts.pageNumber = pageNum; 
 opts.pageSize = pageSize; 
 pager.pagination('refresh', { 
 pageNumber: pageNum, 
 pageSize: pageSize 
 }); 
 dg.datagrid('loadData', state.allRows); 
 } 
 }); 
 $(this).datagrid('loadData', state.data); 
 if (opts.url) { 
 $(this).datagrid('reload'); 
 } 
 }); 
 }, 
 loadData: function (jq, data) { 
 jq.each(function () { 
 $(this).data('datagrid').allRows = null; 
 }); 
 return loadDataMethod.call($.fn.datagrid.methods, jq, data); 
 }, 
 deleteRow: function (jq, index) { 
 return jq.each(function () { 
 var row = $(this).datagrid('getRows')[index]; 
 deleteRowMethod.call($.fn.datagrid.methods, $(this), index); 
 var state = $(this).data('datagrid'); 
 if (state.options.loadFilter == pagerFilter) { 
 for (var i = 0; i < state.allRows.length; i++) { 
 if (state.allRows[i] == row) { 
 state.allRows.splice(i, 1); 
 break; 
 } 
 } 
 $(this).datagrid('loadData', state.allRows); 
 } 
 }); 
 }, 
 getAllRows: function (jq) { 
 return jq.data('datagrid').allRows; 
 } 
 }) 
})(jQuery);

 $.ajax({ 
 type: "get", //AJAX提交方式 
 url: "路径", 
 datatype: "json", 
 data: "userid=" + "id"+ "&username=" + "name", //向后台传递参数，无需传递参数就可以删除 
 success: function (data) { 
 var rows = []; 
 
 for (var i = 0; i < data.length; i++) { //data是返回值的集合 
 rows.push({ //把data数据对应的值压到rows对应数组中 
 colum1: data[i].userid, 
 colum2: data[i].leve, 
 colum3: data[i].Username, 
 colum4: data[i].Tel, 
 colum5: data[i].Mail, 
 colum6: data[i].Explain 
 }); 
 } 
 $('#dg').datagrid({ data: rows }).datagrid('clientPaging'); 
 }, error: function () { //执行出错时执行的方法 
 $.messager.alert("操作提示", "表格失败，请联系管理员！", "warning"); 
 } 
 });

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

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

前台代码：

<table id="dg" class="easyui-datagrid" title="需要显示表格标题 " data-options=" 
 rownumbers:true, 
 singleSelect:true, 
 autoRowHeight:false, 
 pagination:true, 
 "> 
 <thead> 
 <tr> 
 <th data-options="field:'colum1',align:'center'">列名1</th> 
 <th data-options="field:'colum2',align:'center'">列名2</th> 
 <th data-options="field:'colum3',align:'center'">列名3</th> 
 <th data-options="field:'colum4',align:'center'">列名4</th> 
 <th data-options="field:'colum5',align:'center'">列名5</th> 
 <th data-options="field:'colum6',align:'center'">列名6</th> 
 </tr> 
 </thead> 
 </table>

JS代码：

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

把JS代码放在一个function函数中就可以了，函数执行时表格就可以绑定数据了

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在React中详细介绍受控组件与非受控组件

使用Angular如何实现基本购物车功能

在node.js中有关路由，中间件的详细介绍说明

在Vue中如何实现进入/离开动画

在webpack中详细解读入口函数run