easyui多行复杂表头数据显示
来源:互联网 发布:head first php怎么样 编辑:程序博客网 时间:2024/05/01 07:56
先创建一个数据表格
// 初始化数据表格$('#excel').datagrid({columns : columns,// url : '/nursing/queryExcel',url : '/nursing/queryExcel',method : 'GET',rownumbers : true,// 行号autoRowHeight : false,pagination : true,// 分页条fitColumns : true,// 自动使列适应表格宽度checkOnSelect : false,selectOnCheck : true,toolbar : '#tb', // 自定义的工具栏操作按钮pageSize : 5,pageList : [ 5, 10, 15, 20 ],frozenColumns : [[{ field : 'ns_name', title : '养老院名称', width : 150, align : 'center' }, { field : 'devices_name', title : '设备名称', width : 150, align : 'center' }]],onLoadSuccess : function(data) {if (data.rows.length > 0) {// 调用mergeCellsByField()合并单元格mergeCellsByField("excel", "ns_name,devices_name");}}})
上面加载数据成功后执行合并行的方法
/** * EasyUI DataGrid根据字段动态合并单元格 param tableID 要合并table的id param colList * 要合并的列,用逗号分隔(例如:"ns_name,devices_name"); param mainColIndex 要合并的主列索引 */function mergeCellsByField(tableID, colList) {var ColArray = colList.split(",");var tTable = $('#' + tableID);var TableRowCnts = tTable.datagrid("getRows").length;var tmpA;var tmpB;var PerTxt = "";var CurTxt = "";var alertStr = "";// for (j=0;j<=ColArray.length-1 ;j++ )for (j = ColArray.length - 1; j >= 0; j--) {// 当循环至某新的列时,变量复位。PerTxt = "";tmpA = 1;tmpB = 0;// 从第一行(表头为第0行)开始循环,循环至行尾(溢出一位)for (i = 0; i <= TableRowCnts; i++) {if (i == TableRowCnts) {CurTxt = "";} else {CurTxt = tTable.datagrid("getRows")[i][ColArray[j]];}if (PerTxt == CurTxt) {tmpA += 1;} else {tmpB += tmpA;tTable.datagrid('mergeCells', {index : i - tmpA,field : ColArray[j],rowspan : tmpA,colspan : null});tmpA = 1;}PerTxt = CurTxt;}}}
定义列
var columns = [ [ {"field" : "","title" : "使用次数统计","colspan" : 13,"align" : 'center'}], [ {"field" : "map.January","title" : "1月","width" : 30,"align" : 'center',"rowspan" : 1,formatter : function (value, rec) { return rec.map['January']; } }, {"field" : "map.February","title" : "2月","width" : 30,"align" : 'center',"rowspan" : 1,formatter : function (value, rec) { return rec.map['February']; } }, {"field" : "map.March","title" : "3月","width" : 30,"align" : 'center',"rowspan" : 1,formatter : function (value, rec) { return rec.map['March']; } }, {"field" : "map.April","title" : "4月","width" : 30,"align" : 'center',"rowspan" : 1,formatter : function (value, rec) { return rec.map['April']; } }, {"field" : "map.May","title" : "5月","width" : 30,"align" : 'center',"rowspan" : 1,formatter : function (value, rec) { return rec.map['May']; } }, {"field" : "map.June","title" : "6月","width" : 30,"align" : 'center',"rowspan" : 1,formatter : function (value, rec) { return rec.map['June']; } }, {"field" : "map.July","title" : "7月","width" : 30,"align" : 'center',"rowspan" : 1,formatter : function (value, rec) { return rec.map['July']; } }, {"field" : "map.August","title" : "8月","width" : 30,"align" : 'center',"rowspan" : 1,formatter : function (value, rec) { return rec.map['August']; } }, {"field" : "September","title" : "9月","width" : 30,"align" : 'center',"rowspan" : 1,formatter : function (value, rec) { return rec.map['September']; } }, {"field" : "October","title" : "10月","width" : 30,"align" : 'center',"rowspan" : 1,formatter : function (value, rec) { return rec.map['October']; } }, {"field" : "November","title" : "11月","width" : 30,"align" : 'center',"rowspan" : 1,formatter : function (value, rec) { return rec.map['November']; } }, {"field" : "map.December","title" : "12月","width" : 30,"align" : 'center',"rowspan" : 1,formatter : function (value, rec) { return rec.map['December']; } }, {"field" : "sum","title" : "合计","width" : 30,"align" : 'center',"rowspan" : 1} ] ]
后台返回的json数据格式
{ "total": 6, "rows": [ { "ns_name": "疯子养老院", "devices_name": "水疗马桶1", "count": 1, "map": { "July": 7 } }, { "ns_name": "疯子养老院", "devices_name": "多功能马桶1", "count": 2, "map": { "August": 8, } }, { "ns_name": "疯子养老院", "devices_name": "马桶2", "count": 1, "map": { "June": 6, } }, { "ns_name": "HH养老院", "devices_name": "设备5", "count": 1, "map": { "August": 8, } }, { "ns_name": "HH养老院", "devices_name": "设备6", "count": 1, "map": { "August": 8, } } ]}
阅读全文
1 0
- easyui多行复杂表头数据显示
- easyui多行复杂表头数据导出
- easyui 多表头(复杂表头)
- easyUI 复杂表头(效果图) &&代码
- easyUI复杂表头(效果图)&&代码
- easyUI datagrid 多级复杂表头
- easyui datagrid制作复杂表头
- easyui 表头竖着显示
- easyui 多表头设置以及绑定数据
- datagrid 显示多级复杂表头
- JQuery EasyUI datagrid 复杂表头处理
- JQuery EasyUI datagrid 复杂表头处理
- JQuery EasyUI datagrid 复杂表头处理
- 1.4版本的easyUI复杂表头处理
- EasyUI中DataGrid复杂表头案例
- JQuery EasyUI datagrid 复杂表头处理
- JQuery EasyUI DataGrid复杂表头的处理
- JQuery EasyUI datagrid 复杂表头处理
- python decorater working priciple
- RN 环境搭建
- 欢迎使用CSDN-markdown编辑器
- 史上最简单的 MySQL 教程(二十六)「连接查询(上)」
- js中constructor和prototype的正确理解
- easyui多行复杂表头数据显示
- HDU6156 Palindrome Function(回文数)
- 指针常量 常量指针
- NDK学习笔记<七> 使用AndroidStudio本身,编译C/C++文件生成SO文件
- 微信公众号一定时间后退出,并且返回到公众号窗口
- java并发-线程的生命周期
- 史上最简单的 MySQL 教程(二十七)「连接查询(下)」
- python 安装mlab scipy windows
- 剑指offer(3)—从尾到头打印链表