ligerUI合并单元格

我的方法：

//ligerUI设置表格

function f_setGrid(cloumns){
    var cloumns = [
        { name: 'UserName', display: '名称', width:200},
        { name: 'OutfallsName', display: '点位', width:280},
        { name: 'Num', display: '时长(单位：分钟)', width:200},
        { name: 'Sum', display: '总时长(单位：分钟)', width: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开始表示需要合并第一，第二，第三列

　

 

来源：https://www.cnblogs.com/hnzkljq/p/10207514.html