我的方法:
//ligerUI设置表格
function f_setGrid(cloumns){ var cloumns = [ { name: 'UserName', display: '名称', 200}, { name: 'OutfallsName', display: '点位', 280}, { name: 'Num', display: '时长(单位:分钟)', 200}, { name: 'Sum', display: '总时长(单位:分钟)', 200} ] gridManager = $("#maingrid").ligerGrid({ columns: cloumns, width : '99%', height : '99%', pageParmName:'pageno', //page: 1, pageSize:20, rownumbers :true, root:'rows', record:'total', onAfterShowData: function (s) { setTimeout(function () { $('#maingrid .l-grid-body-table tbody').rowspans('UserName','Sum' , gridManager);//rowspan传入 要合并的列的列名 //$('#maingrid .l-grid-body-table tbody').rowspans('UserName' , gridManager);//rowspan传入 要合并的列的列名 //$('#maingrid .l-grid-body-table tbody').rowspans('Sum' , gridManager);//rowspan传入 要合并的列的列名 }); } }); f_reload();//加载表格数据 }
//载入数据源的方法 function f_reload() { var para = $("#form1").serializeArray(); var formData = new FormData(document.getElementById("form1")); gridManager.setOptions({ url : action+'!getData.action?rnd='+Math.random(), parms :$("#form1").serializeArray(), //直接提交表单 dataAction : 'server', dataType : 'server' }); }
//两列
$.fn.extend({ rowspans:function(colname, colname2, tableObj){ var colIdx,colIdx1; for (var i = 0, n = tableObj.columns.length; i < n; i++) { //判断第几列 if (tableObj.columns[i]["columnname"] == colname) { colIdx = i-1; } if (tableObj.columns[i]["columnname"] == colname2) { //同上 colIdx1 = i-1 ; } } return this.each(function () { var that,rt; $('tr', this).each(function (row,element) { //遍历表格 var a = $(element).children(); var gg = $(a.eq(colIdx)); var qq = $(a.eq(colIdx1)); if(that != null && $(that).html() == $(gg).html()){ //合并单元格操作 rowspan = $(that).attr("rowSpan"); rowspan1 = $(rt).attr("rowSpan"); if (rowspan == undefined) { // $(that).attr("rowSpan", 1); $(rt).attr("rowSpan", 1); rowspan = $(that).attr("rowSpan"); rowspan1 = $(rt).attr("rowSpan") } rowspan = Number(rowspan) + 1; rowspan1 = Number(rowspan1) + 1; $(that).attr("rowSpan", rowspan); $(rt).attr("rowSpan", rowspan); $(gg).hide(); $(qq).hide(); }else{ that = gg; rt = qq; } }); }); } });
//一列
//合并单元格 jQuery.fn.rowspan = function (colname, tableObj) { var colIdx; for (var i = 0, n = tableObj.columns.length; i < n; i++) { if (tableObj.columns[i]["columnname"] == colname) { colIdx = i - 1 < 1 ? 0 : i - 1; break; } } return this.each(function () { var that; $('tr', this).each(function (row) { //console.log($('tr').eq(row).find('td').eq(colIdx)); $('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) { //console.log("td = "+this.innerText); // begin 判断单元格是否为空 (为空也合并则去掉该段代码和下面判断) var flag = false; if(this.innerText){ flag = true;; } //end if (that != null && $(this).html() == $(that).html()) { rowspan = $(that).attr("rowSpan"); if (rowspan == undefined) { $(that).attr("rowSpan", 1); rowspan = $(that).attr("rowSpan"); } //单元格是否为空 为空不合并单元格 if(flag){ rowspan = Number(rowspan) + 1; $(that).attr("rowSpan", rowspan); $(this).hide(); } } else { that = this; } }); }); }); }
//根据tankAlias进行合并,判断tankAlias是否为空来获取
//前端基础太差,希望有大神能改善一下(——_——+)
//合并单元格 根据tankAlias进行合并 jQuery.fn.rowspan = function (colname, tableObj) { var colIdx , colTank; if(colname != "tankAlias"){ for (var i = 0, n = tableObj.columns.length; i < n; i++) { if (tableObj.columns[i]["columnname"] == "tankAlias") { colTank = i - 1 < 1 ? 0 : i - 1; //break; } if (tableObj.columns[i]["columnname"] == colname) { colIdx = i - 1 < 1 ? 0 : i - 1; //break; } } }else{ for (var i = 0, n = tableObj.columns.length; i < n; i++) { if (tableObj.columns[i]["columnname"] == colname) { colTank = i - 1 < 1 ? 0 : i - 1; colIdx = colTank; break; } } } return this.each(function () { var that; $('tr', this).each(function (row, element) { var a = $(element).children();
//tankAlias对应的列的数组 var tankText = $('td:eq(' + colTank + ')', this); $('td:eq(' + colIdx + ')', this).filter(':visible').each(function (i,col) { var innerText = tankText[i].innerText; //console.log(this); var flag = false; if(innerText){ flag = true;; } if (that != null && $(this).html() == $(that).html()) { rowspan = $(that).attr("rowSpan"); if (rowspan == undefined) { $(that).attr("rowSpan", 1); rowspan = $(that).attr("rowSpan"); } //单元格是否为空 tankAlias为空不合并单元格 if(flag){ rowspan = Number(rowspan) + 1; $(that).attr("rowSpan", rowspan); $(this).hide(); } } else { that = this; } }); }); }); }
//结果
或使用ligerUI的自带属性(自带的感觉不是很友好,不知道是兼容问题还是其它原因)
mergeCell:null, //合并表的列用法传入[0,1,2],索引0开始表示需要合并第一,第二,第三列