Implement multi-row Merge (rowspan) using extjs

Reference declaration:
The essence of this effect is to use CSS to remove borders without the grouping function.

Code passed test in IE6-8, ff3

Code depends on extjs 3.x

1. Add a CSS style

Java code

1. /* Rowspan grid merge row effect */
2. . Rowspan-grid. x-grid3-body. x-grid3-row {
3. Border: none;
4. Cursor: default;
5. Width: 100%;
6. }
7. . Rowspan-grid. x-grid3-header. x-grid3-cell {
8. /* Border-left: 2px solid transparent; * // * The transparent of IE6 is black? */
9. Border-left: 2px solid # FFF;
10. }
11. . Rowspan-grid. x-grid3-body. x-grid3-row {
12. Overflow: hidden;
13. Border-Right: 1px solid # CCC;
14. }
15. . Rowspan-grid. x-grid3-body. x-grid3-cell {
16. Border: 1px solid # CCC;
17. Border-top: none;
18. Border-Right: none;
19. }
20. . Rowspan-grid. x-grid3-body. x-grid3-cell-first {
21. /* Border-left: 1px solid transparent ;*/
22. Border-left: 1px solid # FFF;
23. }
24. . Rowspan-grid. The x-grid3-body. rowspan-unborder {
25. /* Border-bottom: 1px solid transparent ;*/
26. Border-bottom: 1px solid # FFF;
27. }
28. . Rowspan-grid. x-grid3-body. rowspan {
29. Border-bottom: 1px solid # CCC;
30. }

2. Introduce Ext. UX. Grid. rowspanview object

Java code

1. Ext. NS ('ext. UX. grid ');
2. /**
3. * Implement the rowspan effect of the grid.
4. * @ Author: tipx.iteye.com
5. *
6. * 1. in the column model, you need to configure the rowspan attribute in the columns of the merged rows, for example, {dataindex: 'xxx', header: 'xxx', rowspan: 3} // merge one row for each three rows of the column
7. * 2. Set view attribute => View: New Ext. UX. Grid. rowspanview () for Grid ()
8. * 3. Set the CLS attribute => CLS: 'rowspan-grid' for the grid'
9. * 4. Add a CSS style
10. */
11. Ext. UX. Grid. rowspanview = ext. Extend (ext. Grid. gridview ,{
12. Constructor: function (CONF ){
13. Ext. UX. Grid. rowspanview. superclass. constructor. Call (this, conf );
14. },
15. // Private
16. // Clear the data of a non-First row in the merged row
17. Cleanrenderer: function (column, value, metadata, record, rowindex, colindex, store ){
18. VaR rowspan = column. rowspan;
19. If (! Ext. isempty (rowspan) & rowspan! = 0 ){
20. If (rowindex % rowspan! = 0 ){
21. Return '';
22. }
23. }
24. Return column. Renderer (value, metadata, record, rowindex, colindex, store );
25. },
26. // Private
27. Dorender: function (CS, RS, DS, startrow, colcount, stripe ){
28. VaR Ts = This. templates, Ct = ts. Cell, rT = ts. Row, last = colCount-1;
29. VaR tstyle = 'width: '+ this. gettotalwidth () + ';';
30. // Buffers
31. VaR Buf = [], CB, C, P = {}, Rp = {tstyle: tstyle}, R;
33. // Cmconfig column Model
34. VaR cmconfig = This. cm. config, rowspans = [];
35. For (VAR I = 0, Len = cmconfig. length; I <Len; I ++ ){
36. Rowspans. Push (math. Max (cmconfig [I]. rowspan | 0), 0 ));
37. }
39. For (var j = 0, Len = Rs. length; j <Len; j ++ ){
40. R = Rs [J]; Cb = [];
41. VaR rowindex = (J + startrow );
42. For (VAR I = 0; I <colcount; I ++ ){
43. C = cs [I];
44. P. ID = C. ID;
45. P.css = I = 0? 'X-grid3-cell-first ': (I = last? 'X-grid3-cell-last ':'');
46. P. ATTR = P. cellattr = "";
47. P. value = This. cleanrenderer (cmconfig [I], R. Data [C. name], P, R, rowindex, I, DS );
48. P. Style = C. style;
49. If (ext. isempty (P. Value )){
50. P. value = "& #160 ;";
51. }
52. If (this. markdirty & R. Dirty & typeof R. Modified [C. Name]! = 'Undefined '){
53. P.css + = 'x-grid3-dirty-cell ';
54. }
55. //------------------------------------------------
56. // Add the rowspan class and use styles to merge rows.
57. If (rowspans [I]! = 0 ){
58. // Add the rowspan class to each rowspan row and the last row, that is, add the border-bottom
59. If (j = (len-1) | (rowindex + 1) % rowspans [I] = 0 ){
60. P.css + = 'rowspan ';
61. } Else {
62. P.css + = 'rowspan-unborder ';
63. }
64. }
65. //------------------------------------------------
66. CB [CB. Length] = CT. Apply (P );
67. }
68. VaR alt = [];
69. If (stripe & (rowindex + 1) % 2 = 0 )){
70. Alt [0] = "x-grid3-row-alt ";
71. }
72. If (R. Dirty ){
73. Alt [1] = "x-grid3-dirty-row ";
74. }
75. RP. Cols = colcount;
76. If (this. getrowclass ){
77. Alt [2] = This. getrowclass (R, rowindex, RP, DS );
78. }
79. RP. Alt = alt. Join ("");
80. RP. Cells = CB. Join ("");
81. Buf [Buf. Length] = rt. Apply (RP );
82. }
83. Return Buf. Join ("");
84. }
85. });

3. Create a grid

A. when creating a column model, add the configuration "rowspan: number of rows" (excluding double quotation marks) to the column model that requires merging rows)

Java code

1. {Header: 'company', dataindex: 'company', rowspan: 4} // merge every four rows of this column into one row

B. When creating a grid, configure "CLS: 'rowspan-grid', view: New Ext. UX. Grid. rowspanview ()" for the grid ()"

Java code

1. // Create the grid
2. VaR grid = new Ext. Grid. gridpanel ({
3. Title: 'extjs row merging (rowspan) effect ',
4. Store: store,
5. SM: Sm,
6. CM: cm,
7. Striperows: True,
8. CLS: 'rowspan-grid', // This style must be configured ******
9. View: New Ext. UX. Grid. rowspanview () // *** use View
10. });

4. Preview results

5. Flaws

Because the Box Model of browsers other than IE6 is weird (the main reason is that I am not good at CSS ), the column header is not aligned with the border of the data column (the current effect is already the best effort );

Because "border-left: 2px solid
The transparent in transparent is black under IE6, and I am not good at hack (=. = I don't know what I am good .)
All transparent is replaced with white (the effect will be worse). If you can directly hack IE6, it should be a little more perfect.

6. Note

As can be seen from the above, only the first row of data in the merged row is displayed in the merged row area, but this is not the grouping effect! Instead, the cleanrenderer method in the view directly returns the empty string "non-first row of data in the X rowspan region. Not merge the same data!

7. Download demo
See Attachment