最近在做二维报表,要求报表的表头自定义。在网上找了好久二维报表的插件,一直找不到合适的。后来就用easyui 中的datagrid替代了一下。
根据实际需求,统计的信息可能不是一个模块中的字段信息,所以需要把模块和模块下的字段都显示出来,这就用到了表格中的合并单元格,但是在datagrid中如何实现呢? 如下:
$('#text').datagrid({
border : 2,
nowrap : false,
fit : true,
url: '<%=request.getContextPath()%>/report/showreport.action',
frozenColumns: [[
{ title: '区域名称', field: 'regionname', width: 80, sortable: true}
]],
columns: [
[{"title":"人员管理","colspan":3},
{"title":"资料管理","colspan":3}],
[{"field":"uname0","title":"姓名类似于李","rowspan":1},
{"field":"config_gender1","title":"性别等于女","rowspan":1},
{"field":"config_gender2","title":"性别等于男","rowspan":1},
{"field":"config_datatype0","title":"资料类别等于视频资料","rowspan":1},
{"field":"config_datatype1","title":"资料类别等于图片资料","rowspan":1},
{"field":"config_datatype2","title":"资料类别等于文件资料","rowspan":1}]],
rownumbers: true
});
结果如下图:
说明:从代码中可以看到,表单数组中有两个数组(一般的表格都是有一个数组), 第一个数组就是表头中第一行,该数组对象中没有field属性,第二个数组就是表头第二行。返回的数据格式中字段以第二个数组中的field属性的值为key。格式如下:
[{"regionname":"区域1","uname0":278,"config_gender1":1516,"config_gender2":2522,"config_datatype0":19,"config_datatype1":538,"config_datatype2":525}]
分享到:
相关推荐
UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制...给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865
前台使用Jquery EasyUI 插件datagrid实现多表头动态生成的功能
DataGrid表头合并和单元格内容合并-升级版
EasyUI DataGrid过滤用法实例
解决EasyUIdataGrid列比较多,无数据,列展现不全
easyui datagrid表格打印,支持formatter格式化数据的打印,还原的最初datagrid 的表格数据
http://blog.csdn.net/tianxiawudi0720/article/details/47401399
datagrid添加tooltip及超出宽度添加省略号
NULL 博文链接:https://wusuobuai.iteye.com/blog/1860496
datagrid 4种解决方案 表头与列对齐
修改上一个资源版本中结束编辑时combobox显示问题. 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时,输入框显示图标按钮,实现对应的事件。 3、解决类型为combobox显示为value而...
easyUI中datagrid鼠标悬浮显示图片,博客地址:https://blog.csdn.net/lwf3115841/article/details/119531658?spm=1001.2014.3001.5501
JQuery EasyUI DataGrid服务端分页加载数据后,DataGrid行号不能延续,总是重新由1开始。因为服务端分页取回的是单页数据,通过LoadData方法加载数据后,pageNumber属性被初始化为1,因此行号总是重新由1开始。现在...
纯原创开发,datagrid支持表头拖拽前后,支持浏览器左右跟随鼠标滚动,表头右键支持自定义配置,恢复默认等功能,请访问jquery-easyui-1.5\demo\datagrid\columnConfig.html,所有代码都在该文件中,可以自行抽离或2次扩展
纯原创开发,datagrid支持表头拖拽前后,支持浏览器左右跟随鼠标滚动,表头右键支持自定义配置,恢复默认等功能,请访问jquery-easyui-1.5\demo\datagrid\columnConfig.html,所有代码都在该文件中,可以自行抽离或2次扩展
Wpf DataGrid 复杂表头 自定义实现显示多阶层的表头
主要介绍了jQuery EasyUI学习教程之datagrid点击列表头排序的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
easy-UI 右键列头,控制列的显示和隐藏,是啊easyui拓展的功能之一,只需引入此js代码,即可产生效果,右键列名,控制列的显示和隐藏
主要介绍了EasyUI 数据表格datagrid列自适应内容宽度的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
NULL 博文链接:https://cqh520llr.iteye.com/blog/1956791