easyui datagrid 多表头设置
2015-01-15 17:25
441 查看
最近在做二维报表,要求报表的表头自定义。在网上找了好久二维报表的插件,一直找不到合适的。后来就用easyui 中的datagrid替代了一下。
根据实际需求,统计的信息可能不是一个模块中的字段信息,所以需要把模块和模块下的字段都显示出来,这就用到了表格中的合并单元格,但是在datagrid中如何实现呢? 如下:
结果如下图:
说明:从代码中可以看到,表单数组中有两个数组(一般的表格都是有一个数组), 第一个数组就是表头中第一行,该数组对象中没有field属性,第二个数组就是表头第二行。返回的数据格式中字段以第二个数组中的field属性的值为key。格式如下:
根据实际需求,统计的信息可能不是一个模块中的字段信息,所以需要把模块和模块下的字段都显示出来,这就用到了表格中的合并单元格,但是在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}]
相关文章推荐
- EasyUI DataGrid 多级表头设置
- easyUI-datagrid属性设置display:none,表头不显示
- EasyUI DataGrid 多级表头设置
- easyui datagrid 多表头设置
- easyUI-datagrid属性设置display:none,加载数据或表头不显示
- EasyUI DataGrid 多级表头设置
- <转>easyui datagrid 多表头设置
- EasyUI DataGrid 多级表头设置
- easyui datagrid 多表头设置
- easyui datagrid 多表头设置
- 给easyui datagrid设置title
- easyui的datagrid、treegrid增加表头菜单,用于显示或隐藏列
- easyUI datagrid 表格 表头添加菜单,实现可选列。
- 给easyui datagrid设置title
- Easyui设置datagrid自适应屏幕宽度的方法
- 扩展EasyUI datagrid 增加表头右键菜单功能,可动态对列进行显示和隐藏
- flex 使用AdvancedDataGrid进行表头列合并,设置每列背景颜色(2)
- flex 使用AdvancedDataGrid进行表头列合并,设置每列背景颜色(1)
- EasyUI datagrid 的checkbox设置
- jQuery-easyui datagrid清空数据和去除表头