最近,在对公司的一个老项目进行优化调整。有个使用的三方插件报表页面,一旦查询时间过长就会自动异常并使浏览器崩溃,由于这个插件只有个前人遗留的dll文件,实在看不懂里面的代码无从下手,既然项目前端大部分是基于EasyUI做的,想着就直接用EasyUI的DataGrid做数据报表明细展示。
由于之前很少做过B/S相关的项目,对于前端了解的不是很多,好在EasyUI框架文档资料比较多,功能也比较齐全,上手还是比较快的。
下面开始我的第一个关于报表开发时遇到的第一个问题:EasyUI DataGrid动态列数据绑定
EasyUI DataGrid动态列数据绑定实现方式并不是很发杂,请求到远程数据后,通过其中一条列表数据获取到列字段,然后在通过datagrid对数据进行绑定
创新互联建站,为您提供成都网站建设、成都网站制作、网站营销推广、网站开发设计,对服务成都咖啡厅设计等多个行业拥有丰富的网站建设及推广经验。创新互联建站网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈,认真对待每位客户,为客户提供赏心悦目的作品。 与客户共同发展进步,是我们永远的责任!
$.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; } // 可选
}
相关参考:
https://www.jeasyui.com/forum/index.php?topic=2197.0
http://jeasyui.com/documentation/index.php#