zoukankan      html  css  js  c++  java
  • ligerUI合并单元格

    我的方法:

    //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开始表示需要合并第一,第二,第三列

     

  • 相关阅读:
    Linux useradd 命令介绍
    lsscsi
    安装MegaCli,查看linux服务器raid信息
    ipmitool命令详解
    python 收发邮件
    angularjs 高级玩法 创建递归的模板
    我的Android进阶之旅------&gt;Android Activity的singleTask载入模式和onActivityResult方法之间的冲突
    Git实战(三)环境搭建
    使用Samba实现Linux与Windows文件共享实践
    设计模式个人备忘(享元模式,strategy, templete strategy)
  • 原文地址:https://www.cnblogs.com/hnzkljq/p/10207514.html
Copyright © 2011-2022 走看看