EasyUI给表格绑定数据是最常用的方法，小编分享一下总结出来的两种绑定表格方法，知识在于积累。
第一种：数据存放在数据集中，每一行对应多个值，利用循环把数据绑定到表格
JS代码：
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);
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 () { //执行出错时执行的<a href="https://www.f2er.com/tag/fangfa/" target="_blank" class="keywords">方法</a>
$.messager.alert("操作<a href="https://www.f2er.com/tag/tishi/" target="_blank" class="keywords">提示</a>","表格失败，请联系<a href="https://www.f2er.com/tag/guanliyuan/" target="_blank" class="keywords">管理员</a>！","warning");
} });
需要绑定表格时调用AJAX方法，AJAX执行完后会自动调用显示数据方法，表格数据就显示出来了
JS代码：
//表格加载成功<a href="https://www.f2er.com/tag/houzhixing/" target="_blank" class="keywords">后执行</a>的<a href="https://www.f2er.com/tag/daima/" target="_blank" class="keywords">代码</a>，如果不需要可以<a href="https://www.f2er.com/tag/shanchu/" target="_blank" class="keywords">删除</a>
} })
把JS代码放在一个function函数中就可以了，函数执行时表格就可以绑定数据了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。