EasyUI DataGrid动态列数据绑定实现方式并不是很发杂,请求到远程数据后,通过其中一条列表数据获取到列字段,然后在通过datagrid对数据进行绑定,上代码
$.getJSON(url,queryParams,function (result) {
// 清空报表节点数据
$("#tbGrid").empty();
// 拼装列头
if (result && result.total > 0) {
var columns = new Array();
$.each(result.rows[0],function (i,field) {
var column = {};
column["title"] = i;
column["field"] = i;
columns.push(column);
});
$('#tbGrid').datagrid({
height: 780,singleSelect: true,rownumbers: true,pagination: true,columns: [
columns // 列头绑定
],data: result.rows // 表格内容数据绑定
});
//分页处理
var pager = $('#tbGrid').datagrid('getPager');
pager.pagination({
showRefresh: false,total: result.total,pageList: [50,100,200,500],pageSize: queryParams.rows,pageNumber: queryParams.page,buttons: [{
text: '导出',iconCls: 'icon-redo',handler: function () {
exportToExcel(queryParams);
}
}],onSelectPage: function (pageNumber,pageSize) {
$(this).pagination('loading');
btnRefresh_onclick(pageNumber,pageSize);
$(this).pagination('loaded');
}
});
后台返回的数据对象是按datagrid要求的格式数据返回的
public class EasyUIPageObject
{
public object rows { get; set; }
public int total { get; set; }
public object footer { get; set; } // 可选
}