报表开发的那些日子:关于EasyUI DataGrid动态列数据绑定

  • 报表开发的那些日子:关于EasyUI DataGrid动态列数据绑定已关闭评论
  • 156 次浏览
  • A+
所属分类:Web前端
摘要

最近,在对公司的一个老项目进行优化调整。有个使用的三方插件报表页面,一旦查询时间过长就会自动异常并使浏览器崩溃,由于这个插件只有个前人遗留的dll文件,实在看不懂里面的代码无从下手,既然项目前端大部分是基于EasyUI做的,想着就直接用EasyUI的DataGrid做数据报表明细展示。
由于之前很少做过B/S相关的项目,对于前端了解的不是很多,好在EasyUI框架文档资料比较多,功能也比较齐全,上手还是比较快的。
下面开始我的第一个关于报表开发时遇到的第一个问题:EasyUI DataGrid动态列数据绑定
EasyUI DataGrid动态列数据绑定实现方式并不是很发杂,请求到远程数据后,通过其中一条列表数据获取到列字段,然后在通过datagrid对数据进行绑定

最近,在对公司的一个老项目进行优化调整。有个使用的三方插件报表页面,一旦查询时间过长就会自动异常并使浏览器崩溃,由于这个插件只有个前人遗留的dll文件,实在看不懂里面的代码无从下手,既然项目前端大部分是基于EasyUI做的,想着就直接用EasyUI的DataGrid做数据报表明细展示。
由于之前很少做过B/S相关的项目,对于前端了解的不是很多,好在EasyUI框架文档资料比较多,功能也比较齐全,上手还是比较快的。
下面开始我的第一个关于报表开发时遇到的第一个问题:EasyUI DataGrid动态列数据绑定
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; } // 可选  }  

相关参考:
https://www.jeasyui.com/forum/index.php?topic=2197.0
http://jeasyui.com/documentation/index.php#