Use a new method to merge cells in the extjs4.1 Grid

First of all, I would like to express my thanks to the post "100 lines of code to solve the problem of extjs4.1 merging cells" posted by yunfengcheng of the crazy forum.

If you need his code, you can download it by yourself. It is not convenient to post it here (people can sell 30 yuan, although a little expensive, haha ).

Now, let's go to the topic. The effect of using the code is as follows:

From this figure, we can see that all the merged items are merged, and those that should not be merged are also merged. The third column is "unit a", which belongs to different plots and numbers of different buildings, it is common sense that data cannot be merged. Therefore, a problem is raised. When merging columns, you should judge the merging of the previous column. cells in different merging areas are equal but not merged. The effect should be as follows:

This is the optimized code effect. The specific method is described below:

If you read the code 100-line code to solve the problem of extjs4.1 merging cells, you will find that many each statements are written and nested, I have obviously felt that the speed is a little slow, so I wonder why so many each tasks are involved? How nice it is to directly use arrays. The parameters have already specified the columns to be merged. You just need to use arrays to retrieve them directly.

The Code is as follows:

/*** Kunoy ** merge cells * @ Param {} grid the Grid Object of the cells to be merged * @ Param {} Which columns of Cols are to be merged? [1, 2, 4] */var mergecells = function (grid, cols) {var arraytr = document. getelementbyid (grid. GETID () + "-Body "). firstchild. firstchild. firstchild. getelementsbytagname ('tr'); var trcount = arraytr. length; var arraytd; var TD; var merge = function (rowspanobj, removeobjs) {// defines the merging function if (rowspanobj. rowspan! = 1) {arraytd = arraytr [rowspanobj. tr]. getelementsbytagname ("TD"); // merge row TD = arraytd [rowspanobj. td-1]; TD. rowspan = rowspanobj. rowspan; TD. valign = "Middle"; Ext. each (removeobjs, function (OBJ) {// stealth merged cell arraytd = arraytr [obj. tr]. getelementsbytagname ("TD"); arraytd [obj. td-1]. style. display = 'none';}) ;}}; var rowspanobj ={}; // TD object {TR: 1, TD: 2, rowspan: 5} var removeobjs = []; // The TD object to be deleted [{TR: 2, TD: 2}, {TR: 3, TD: 2}] var Col; Ext. each (cols, function (colindex) {// perform a column-by-column operation on trvar rowspan = 1; var divhtml = NULL; // the value in the cell for (VAR I = 1; I <trcount; I ++) {// I = 0 indicates useless rows such as the header, arraytd = arraytr [I]. getelementsbytagname ("TD"); var cold = 0; // Ext. each (arraytd, function (TD) {// obtain the rownumber column and check column // If (TD. getattribute ("class "). indexof ("X-grid-cell-Special ")! =-1) // cold ++; //}); Col = colindex + cold; // skip the rownumber column and check column if (! Divhtml) {divhtml = arraytd [col-1]. innerhtml; rowspanobj = {TR: I, TD: Col, rowspan: rowspan} else {var celltext = arraytd [col-1]. innerhtml; var addf = function () {rowspanobj ["rowspan"] = rowspanobj ["rowspan"] + 1; removeobjs. push ({TR: I, TD: Col}); if (I = trCount-1) Merge (rowspanobj, removeobjs); // execute the Merge function}; var mergef = function () {Merge (rowspanobj, removeobjs); // execute the Merge function divhtml = celltext; rowspanobj = {TR: I, TD: Col, rowspan: RO Wspan} removeobjs = [] ;}; if (celltext = divhtml) {If (colindex! = Cols [0]) {var leftdisplay = arraytd [col-2]. style. display; // determine whether the value of the left cell has been displayif (leftdisplay = 'None') addf (); elsemergef () ;} elseaddf ();} elsemergef ();}}});};

In terms of the amount of code, there are only about 70 lines (I wanted to solve the problem by turning the title into 70 lines of code, and I am not the title party ). Here, we need to talk about the getelementsbytagname. In the past, I thought it was an array. Actually, it wasn't just like an array. You can use array [0] to access the elements in it, however, you cannot operate on the array using the methods of push, Pop, shift, etc. There are also resources on the Internet that define an array to push all elements, and then delete them, I did not use it. I can directly find the element subscript to be deleted and skip it, because the element sequence obtained by getelementsbytagname is consistent with the actual Dom sequence.

In addition:

If (colindex! = Cols [0]) {var leftdisplay = arraytd [col-2]. style. display; // determine whether the value of the left cell has been displayif (leftdisplay = 'None') addf (); elsemergef ();} else addf ();

Colindex! = Cols [0] is to skip the first column (the first column to start merging). This column does not need to judge the merger of the previous column. Here we use display as the judgment condition, because the items to be merged are both display = none, there is no description of merging. Here is the separation points of the two merging areas. Of course, you can also write another judgment condition by yourself, you can define a function to determine whether a cell is in a merging area. The condition is whether the left cell of the current cell is in the same merging area as the upper and left cells, and the cell continues cyclically, if it is not, it will be merged in many ways. You can use it freely. If you have a new method, you will not be able to share it with others.

The comments in the Code are optional:

Ext. each (arraytd, function (TD) {// obtain the rownumber column and check column if (TD. getattribute ("class "). indexof ("X-grid-cell-Special ")! =-1) Cold ++ ;});

The rownumber column and check column are included in the parameters of the merged column.

Usage:

Ext.getCmp('grid').getStore().on('load',function(){    mergeCells(Ext.getCmp('grid'),[1,2,3,4,5,6]);});

After the data is loaded, it is executed and merged from the first column. If the first column is the rownumberer column, use [2, 3, 4, 5, 6] to skip the first column.

 

2013-1-26 reply to sgq0085 on the 7 th floor:

Thank you for your question. I want to test it. Question 1 can be completed,

You have carefully checked the source code. Different environments may have different problems. You can modify and modify the source code yourself.

Question 2: Are you talking about this problem:

If you use HTML to write a table, I think the same is true, because setting the rowspan attribute is the first row to start merging. This is definitely the effect.

Author:Kunoy Source:Http://blog.csdn.net/kunoy Statement:The authors write blogs to sum up experience and exchange learning.
If you need to reprint the statement, please keep it as much as possible and provide the original article connection clearly on the article page. Thank you!