合并多维表格

原创 2015年11月18日 11:46:46

最近遇到一需求,要求数据报表正复杂样式展示,那么想到的思路就是先纵向合并,然后再横向合并,后台数据按明细倒入,前端先渲染成普通的表,然后在对表进行重构,代码如下:

/*
@param
{
oprIndex:[],需要合并的列index,index从0开始
}
*/
var deleteObjR = [],
    deleteObjC = [];

function combine(oprIndex,table){
    //转成数字数字
    var rowIndex = [],
    colIndex = [];
    var index = oprIndex.split(";");


    //纵向合并
    var cols = index[1];
    if(cols!=undefined && cols!="") {
    var col = cols.split(",");
    //转成数字数字
    for(var i= 0,len=col.length;i<len;i++) {
        colIndex.push(parseInt(col[i]));
     }
    combineCol(colIndex, table);
    chgTable(table);

    //横向合并
    var row = index[0].split(",");
    for(var i= 0,len=row.length;i<len;i++) {
        rowIndex.push(parseInt(row[i]));
    }
    var indexList = chgRowIndex(rowIndex.sort());
    if(indexList.length){
        for(var k=0,len=indexList.length; k<len; k++){
            combineRow(indexList[k],table);
        }
    }
    chgTable(table);
    }
 }

function chgRowIndex(arr){
  var tempArr = [],
      result =[],
      last=0;

  if(arr.length){
    last = arr[0];
    tempArr.push(last);
  }

  for(var k=1,len=arr.length; k<len; k++){

    if(last+1 == arr[k]){//同一组
      tempArr.push(arr[k]);
      last = arr[k];

    }else{
      tempArr.length > 1 && result.push(tempArr);

      last = arr[k];
      tempArr = [last];
    }

  }

  tempArr.length > 1 && result.push(tempArr)

  return result.length && result;
}

//横向合并时,如果被纵向合并过,调整横向合并列索引
function onCombinCol(self,indexList,table){
    var colLen  = $(table).find("thead tr").find("th").length,
        isCol = false,
        tmplen = 0,
        resultIndexList = [],
        lastIndex = 0;

    self.find("td").each(function(index){
        lastIndex = index;
        if(index==(colLen-1)){
            isCol = true;
        }
    });
    if(!isCol) {
        tmplen = colLen - 1 - lastIndex;
    }
    for(var i= 0,len=indexList.length-tmplen;i<len;i++){
        resultIndexList.push(indexList[i]);
    }

    return resultIndexList;
}

function combineRow(indexList,table){
    var table = $(table),
        max = Math.max.apply(null,indexList),
        self = null,
        begin = 0,
        count = 1,
        tmpIndexList = [],
        temp = "";

    table.find('tbody tr').each(function(index){
      self = $(this);
      begin = 0;
      count = 1;
      temp = "";
      //判断当前行,td是否被合并过
      tmpIndexList = onCombinCol(self,indexList,table);

      self.find('td').each(function(index1){
        if(tmpIndexList.indexOf(index1) == -1 || index1 > max)
          return;

        if(temp == ""){
          temp = $.trim($(this).html());
          begin = index1;
        }else{
          var current = $.trim($(this).html());
          if(temp == current){
            count++;
            if (index1 == max) {
              deleteObjR.unshift({begin:begin,count:count,row:index});
            }
          }else{

            if(count >1){
              deleteObjR.unshift({begin:begin,count:count,row:index});
            }

            temp = current;
            begin = index1;
            count = 1;
          }
        }
      });

    });
}
function combineCol(indexList,table){
    var table = $(table),
        temp = "",
        begin = 0,
        current = "",
        count = 1,
        selector = '';

    for(var j=0,len=indexList.length;j<len;j++){
        var n = indexList[j];
        selector = '.col'+ n;
        temp = "";
        begin = 0;
        current = "";
        count = 1;

        table.find(selector).each(function(index1){

            var self = $(this);

            if(index1 == 0 ){
                temp = $.trim(self.html());
                begin = index1;

            }else{
                current = $.trim(self.html());

                if(temp == current){
                    if(n!=0) {
                        var boolist = [];
                        isCombin(table, index1, n-1,boolist);
                        if(!boolist.contains(false)) {//前一列是否合并,是合并,否不合并
                            count++;
                        }else {
                            if(count > 1){
                                deleteObjC.unshift({begin:begin,count:count,col:n});
                            }
                            temp = current;
                            begin = index1;
                            count = 1;
                        }
                    }else {
                        count++;
                    }

                    if(index1 == (table.find(selector).length-1)){
                        deleteObjC.unshift({begin:begin,count:count,col:n});
                    }

                }else{

                    if(count > 1){
                        deleteObjC.unshift({begin:begin,count:count,col:n});
                    }

                    temp = current;
                    begin = index1;
                    count = 1;
                }
            }
        });

    }
}

function isCombin(table,index,n,boolist) {
    var preCurrent = '',
        current = '',
        cur = '' ,
        pre = '',
        selector = '',
        preSelector = '';

    if(boolist.contains(false) || n<0){
        return;
    }

    selector = ".col" + n +":eq("+index+")";
    preSelector = ".col" + n + ":eq("+(index-1)+")";

    pre = table.find(preSelector);
    cur = table.find(selector);

    preCurrent = $.trim(pre.html());
    current = $.trim(cur.html());
    if(preCurrent != current) {
        boolist.push(false);
    }
    //追溯到最最源头,看是否相同,不同则不能合并
    if(!boolist.contains(false)){
        isCombin(table,index,n-1,boolist);
    }
}

function chgTable(table){
    var table = $(table),
        currentObj = {},
        selector = "",
        tempCount = 0,
        tempBegin = 0,
        currentRow = null;

    for(; deleteObjR.length; ){
        currentObj = deleteObjR[0];
        tempCount = currentObj.count;
        tempBegin = currentObj.begin;
        selector = 'tbody tr:eq('+currentObj.row+')';

        currentRow = table.find(selector);

        currentRow.find('td:eq('+tempBegin+')').attr('colspan',tempCount);
        for(; tempCount > 1 ; tempCount--){
            currentRow.find('td:eq('+(tempBegin+1)+')').remove();
        }
        deleteObjR.shift(currentObj);
    }

    for(; deleteObjC.length; ){
        currentObj = deleteObjC[0];
        tempCount = currentObj.count;
        tempBegin = currentObj.begin;

        selector = '.col'+currentObj.col+':eq('+tempBegin+')';

        table.find(selector).attr('rowspan',tempCount);

        for (;tempCount > 1; tempCount--) {
            selector = '.col'+currentObj.col+':eq('+(tempBegin+1)+')';
            table.find(selector).remove();
        }
        deleteObjC.shift(currentObj);
    }
}

调用时传入参数表名和索引,表名,要合并的行索引;要合并列索引,如

var oprIndex = “0,1,2;0,1,2,3”;
combine(oprIndex,table);

结果:
原表:
原始表

重构后的表:
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

7.3-全栈Java笔记:多维数组的应用及数组存储表格数据

多维数组可以看成以数组为元素的数组。可以有二维、三维、甚至更多维数组,但是实际开发中用的非常少。最多到二维数组(学习容器后,我们一般使用容器,二维数组用的都很少)。  【示例1】二维数组的声明 ...

多维表格转换。

----1 需要用到的表: -- Create table---转换后的表 create table GDP_PROVINCE_TURN ( 时间 NUMBER, 行业代码 VARCHA...

多维数组排序及数组合并

1.多维数组排序(例子为倒序) 1)函数

js动态表格合并拆分行

  • 2012-10-15 16:01
  • 11KB
  • 下载

使用jQuery实现页面表格中相同内容的行或列合并

网上找到的jQuery方法: //函数说明:合并指定表格(表格id为_w_table_id)指定列(列数为_w_table_colnum)的相同文本的相邻单元格 //参数说明:_w_table...

电子表格数据合并工具

  • 2011-01-23 12:30
  • 1.07MB
  • 下载

【js】动态合并表格

//动态合并表格 //传入参数:tableObj(表格ID); //childNodeIndexs:需要合并的列索引可传多列索引用逗号分割如:(‘0,1,2’表示合并表格的一二三列数据,注意传入索引时...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)