EasyUI使用DataGrid实现动态列数据绑定
2023-09-11 14:16:44 时间
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; } // 可选
}