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,            }        }    ]}


原创粉丝点击