ExtJS 4.2 Grid Component Cell merging method _extjs

The ExtJS 4.2 grid component itself does not provide cell merge functionality and needs to be implemented on its own.

Directory

1. Principle

2. Multi-column Merging

3. Code and online Demo

1. Principle

1.1 HTML code Analysis

First create a grid component, and then look at the HTML source code below.

1.1.1 Grid Components

1.1.2 HTML code

As you can see from these codes, the grid component can be divided into Grid-header and grid-body two areas (if you have toolbars and page bars, they all contain separate areas).

The grid-body contains a number of TR elements, each of which represents a row of data in the grid component; Each TR contains a number of TD, each of which represents a single cell.

1.1.3 Structure diagram

1.2 Principle

1.2.1 Step Description

The specific action is for the TR element, and the steps are as follows:

1 compares the value of a TD of the first line of TR with the second line of TR, if the values of the two rows are equal: Set the value of the TD's RowSpan property of the first line of TR to +1; set the second line TR's TD hidden.

2 compares the value of a TD of the first line of TR with the third line of TR, if the values of the two rows are equal: Set the value of the TD's RowSpan property of the first line of TR to +1; set the third line TR's TD hide.

3 Repeat the above steps, if the values of the two rows are not equal, skip this comparison and make the next comparison: the current row is compared to the next line.

1.2.2 Sample

1) TR1 compared with TR2, the values are equal: Set the value of the TR1 rowspan property +1, and set the TD hidden in TR2.

2) TR1 compared with TR3, the values are equal: Set the value of the TR1 rowspan property +1, and set the TD hidden in TR3.

3) TR1 compared with TR4, the TD is not equal. Skip this comparison for the next comparison: TR4 vs. TR5 (the current row is compared to the next row).

2. Multi-column Merging

Gird merges can be divided into single and multiple-column merges, where multiple-column merges can be divided into two categories:

First: Merge by column.

Second: same column merge.

2.1 Merge by Column

Note: Each column can be merged separately on the premise that the preceding columns are merged.

Example:

2.2 All Columns merged

Note: Only the TD specified by the neighboring TR will be merged.

Example:

3. Code and online Demo

3.1 Code

　/** * Merging grid data column * @param grid {Ext.Grid.Panel} requires a merged grid * @param colindexarray {array} needs to merge the index (ordinal) array of the columns, counting from 0, and the ordinal number. * @param isallsome {Boolean} if the Colindexarray of 2 TR must complete the same to merge.  True: Complete the same; false: not exactly the same * * function Mergegrid (grid, Colindexarray, isallsome) {isallsome = Isallsome = n undefined? True: Isallsome;
 The default is True//1. contains data var GridView = document.getElementById (Grid.getview (). GetId () + '-body ');
 if (GridView = null) {return;
 //2. Get all tr var trarray = [];
 if (Grid.layout.type = = ' table ') {//If the table is deployed, the TR method obtained is as follows Trarray = Gridview.childnodes;
 else {Trarray = Gridview.getelementsbytagname (' tr '); //3. Merge operation if (Isallsome) {//3.1 All columns Merge: Only the TD specified by the neighboring TR will be merged into var lasttr = trarray[0];//point to First Line//1) Traverse Grid TR, from
  The second data row starts for (var i = 1, trlength = Trarray.length i < trlength; i++) {var thistr = trarray[i]; var ispass = true; Whether to verify through//2 traverse the columns that need to be merged for (var j = 0, colarraylength = colindexarray.length J < colarraylength; J + +) {var colindex = colindexarray[j]; 3 Compare 2 TD columns to match, if not match, point last to the current column if (Lasttr.childnodes[colindex].innertext!= Thistr.childnodes[colindex].
   innertext) {lasttr = Thistr;
   Ispass = false;
  Break  }//4 If Colindexarray validation passes, merge the current line into the ' merged rows ' if (Ispass) {for (var j = 0, colarraylength = colindexarray.length; j < Colarraylength;
   J + +) {var colindex = colindexarray[j]; 5 Set the TD RowSpan property of the merged line if (Lasttr.childnodes[colindex].hasattribute (' rowspan ')) {var rowspan = Lasttr.childnodes[c
   Olindex].getattribute (' rowspan ')-0;
   rowspan++;
   Lasttr.childnodes[colindex].setattribute (' rowspan ', rowspan);
   else {lasttr.childnodes[colindex].setattribute (' rowspan ', ' 2 '); }//lasttr.childnodes[colindex].style[' text-align ' = ' center ';; Horizontally centered lasttr.childnodes[colindex].style[' vertical-align '] = ' middle ';;
  Vertically centered Thistr.childnodes[colindex].style.display = ' none ';
}} else {//3.2 columns by column: Each column merges//1 separately in the preceding column to iterate through the column ordinal array for (var i = 0, colarraylength = colindexarray.length i < colarraylength; i++) {var colindex = colindexarray[i]; var lasttr = trarray[0]; Merge TR, default to First row of data//2 traverse Grid TR, starting with the second data row for (var j = 1, trlength = Trarray.length J < Trlength; J + +) {var thi
  STr = Trarray[j]; 3) 2 TR TD content as if (Lasttr.childnodes[colindex].innertext = = Thistr.childnodes[colindex].innertext) {//4) If the previous TD is not merged , the following TD does not merge operations if (i > 0 && thistr.childnodes[colindexarray[i-1]].style.display!= ' None ') {lasttr = t
   HISTR;
   Continue else {//5) Eligible merge TD if (Lasttr.childnodes[colindex].hasattribute (' rowspan ')) {var rowspan = Lasttr.childnode
    S[colindex].getattribute (' rowspan ')-0;
    rowspan++;
   Lasttr.childnodes[colindex].setattribute (' rowspan ', rowspan);
   else {lasttr.childnodes[colindex].setattribute (' rowspan ', ' 2 '); }//lasttr.childnodes[colindex].style[' text-align ' = ' center ';; Horizontal Center lasttr.childnodes[colindex].style[' VerticaL-align '] = ' middle ';; Vertically centered Thistr.childnodes[colindex].style.display = ' none ';
  Current line Hide} else {//5) 2 TR TD content is not the same lasttr = Thistr;　 }
  }
 }
 }
}

3.2 Online Demo

Online Demo: http://www.akmsg.com/ExtJS/index.html

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.