EasyUI使用DataGrid实现动态列数据绑定
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
最近,在对公司的一个老项目进行优化调整。有个使用的三方插件报表页面,一旦查询时间过长就会自动异常并使浏览器崩溃,由于这个插件只有个前人遗留的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; } // 可选 ?}
到此这篇关于EasyUI使用DataGrid实现动态列数据绑定的文章就介绍到这了,更多相关EasyUI DataGrid 动态列数据绑定内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!
相关参考:
https://www.jeasyui.com/forum/index.php?topic=2197.0
http://jeasyui.com/documentation/index.php#
- jQuery EasyUI API 中文文档 - DataGrid数据表格
- Jquery下EasyUI组件中的DataGrid结果集清空方法
- jQuery easyui datagrid动态查询数据实例讲解
- 扩展easyui.datagrid,添加数据loading遮罩效果代码
- jQuery EasyUI datagrid实现本地分页的方法
- jQuery EasyUI之DataGrid使用实例详解
- jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
- 实现easyui的datagrid导出为excel的示例代码
- 详解EasyUi控件中的Datagrid
- jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
相关文章
jquery获取特定name所有选中的checkbox,支持IE9标准模式
jquery获取特定name所有选中的checkbox,支持IE9标准模式,需要的朋友可以参考一下2013-03-03
最新评论