Element Table Merge

Keywords: Javascript

var mergeIndex = 0;
var hasMerge = false;
var mergeIndex1 = 0;
var hasMerge1 = false;
//Method global variables
//Official Web provides us with a span-method method for table merging, with four parameters returned: row,column,rowIndex,columnIndex;row and column are the rows and columns of the table, where the current row and column values are, that is, the values in tableData, rowIndex,columnIndex is the ordinal number of the current row and column
arraySpanMethod({ row, column, rowIndex, columnIndex }) {

    var that = this;
    var spanNum = this.spanNum;
    var spanNum1 = this.spanNum1;
    console.log("FFF",spanNum)
  //   Merge Column 2
    if (columnIndex === 1) {
      var num = spanNum1[row.fldSTName+'-'+row.fldRName];
      if (!hasMerge) {
        hasMerge = true;
        mergeIndex = rowIndex;
        if (num === 1) {
          hasMerge = false;
        }
        return [num, 1];//[10,1]
      } else {
        if (rowIndex === mergeIndex + num - 1) {
          hasMerge = false;
        }
        return [0, 0];
      }
    }
    //Merge First Column
    if (columnIndex == 0) {
      var num = spanNum[row.fldSTName];
      if (!hasMerge1) {
        hasMerge1 = true;
        mergeIndex1 = rowIndex;
        if (num === 1) {
          hasMerge1 = false;
        }
        return [num, 1];
         // The number of merges of rows and columns returned here, either an array or an object, works the same
         // Here rowspan is num, there are several rows merged, colspan is one column merged, you want to merge several rows and columns write the corresponding number
      } else {//After merging
        if (rowIndex === mergeIndex1 + num - 1) {
          hasMerge1 = false;
        }
        return [0, 0];
       // Here's an else judgment, or the original data of the merged column will be populated in the merged table
      // This judgement is to omit the values of the first few rows of the merge, fill in the values of the original last row directly, merge a few rows and omit the values of a few rows
      }
    }
}

//The above is the same way I encapsulated a merged row to merge columns
//The first thing you need to do with the above method is to process the data and sort together the data that needs to be merged, where the spanNum data format is  

The arr array contains the only data for your merged rows (there are many Datong cities, but this only occurs once), where row.fldSTName is the current value for the merged rows.Note that when you need to merge the second row after merging the first row, you need to decide if the first row of the second row you want to merge has the same value.


Here I work with the value of the second row plus the first row (row.fldSTName+'-'+row.fldRName)


Hope it will be useful for you if I write something that I don't understand you can contact me QQ1195392918

Posted by AVATAr on Thu, 07 Nov 2019 07:12:38 -0800