Extjs 实现多行合并(rowspan)效果

引用

声明：

  本效果的本质，只是用css去除边框而已，不包含分组功能。

  代码在IE6-8, FF3下测试通过

  代码依赖于Extjs 3.x

1.加入css样式

Java代码  ​​​​

2. /*rowspan grid合并行效果*/  
3. .rowspan-grid .x-grid3-body .x-grid3-row {  
4.     border:none;  
5.     cursor:default;  
6.     width:100%;  
7. }  
8. .rowspan-grid .x-grid3-header .x-grid3-cell{  
9.     /*border-left: 2px solid transparent;*//*ie6的transparent下显示黑色?*/  
10.     border-left: 2px solid #fff;  
11. }  
12. .rowspan-grid .x-grid3-body .x-grid3-row{  
13.     overflow: hidden;  
14.     border-right: 1px solid #ccc;  
15. }  
16. .rowspan-grid .x-grid3-body .x-grid3-cell {  
17.     border: 1px solid #ccc;  
18.     border-top:none;  
19.     border-right:none;  
20. }  
21. .rowspan-grid .x-grid3-body .x-grid3-cell-first {  
22.     /*border-left: 1px solid transparent;*/  
23.     border-left: 1px solid #fff;  
24. }  
25. .rowspan-grid .x-grid3-body .rowspan-unborder {  
26.     /*border-bottom:1px solid transparent;*/  
27.     border-bottom:1px solid #fff;  
28. }  
29. .rowspan-grid .x-grid3-body .rowspan {  
30.     border-bottom: 1px solid #ccc;  
31. }  

2.引入Ext.ux.grid.RowspanView对象

Java代码  ​​​​

2. Ext.ns('Ext.ux.grid');  
3. /** 
4.  * 实现grid的rowspan效果 
5.  *  @author: tipx.iteye.com 
6.  * 
7.  *  1.在列模型里需要配置合并行的列中设置rowspan属性，如：{dataIndex:'xxx', header:'xxx', rowspan:3} //该列每三行合并一行 
8.  *  2.为grid设置view属性 => view : new Ext.ux.grid.RowspanView() 
9.  *  3.为grid设置cls属性 => cls : 'rowspan-grid' 
10.  *  4.加入css样式 
11.  */  
12. Ext.ux.grid.RowspanView = Ext.extend(Ext.grid.GridView, {  
13.     constructor: function(conf) {  
14.         Ext.ux.grid.RowspanView.superclass.constructor.call(this, conf);  
15.     },  
16.     // private  
17.     //清除合并的行中，非第一行的数据  
18.     cleanRenderer : function(column, value, metaData, record, rowIndex, colIndex, store) {  
19.         var rowspan = column.rowspan;  
20.         if(!Ext.isEmpty(rowspan) && rowspan !== 0){  
21.             if(rowIndex % rowspan !== 0){  
22.                 return '';  
23.             }  
24.         }  
25.         return column.renderer(value, metaData, record, rowIndex, colIndex, store);  
26.     },  
27.     // private  
28.     doRender : function(cs, rs, ds, startRow, colCount, stripe){  
29.         var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1;  
30.         var tstyle = 'width:'+this.getTotalWidth()+';';  
31.         // buffers  
32.         var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r;  
33.   
34.         //cmConfig列模型  
35.         var cmConfig = this.cm.config, rowspans=[];  
36.         for(var i = 0, len = cmConfig.length; i < len; i++){  
37.             rowspans.push(Math.max((cmConfig[i].rowspan || 0), 0));  
38.         }  
39.   
40.         for(var j = 0, len = rs.length; j < len; j++){  
41.             r = rs[j]; cb = [];  
42.             var rowIndex = (j+startRow);  
43.             for(var i = 0; i < colCount; i++){  
44.                 c = cs[i];  
45.                 p.id = c.id;  
46.                 p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');  
47.                 p.attr = p.cellAttr = "";  
48.                 p.value = this.cleanRenderer(cmConfig[i], r.data[c.name], p, r, rowIndex, i, ds);  
49.                 p.style = c.style;  
50.                 if(Ext.isEmpty(p.value)){  
51.                     p.value = "&#160;";  
52.                 }  
53.                 if(this.markDirty && r.dirty && typeof r.modified[c.name] !== 'undefined'){  
54.                     p.css += ' x-grid3-dirty-cell';  
55.                 }  
56.                 //------------------------------------------------  
57.                 //添加rowspan类，用样式实现合并行的效果  
58.                 if(rowspans[i] !== 0){  
59.                     //每rowspan行以及最后一行加上rowspan类，即加上border-bottom  
60.                     if(j == (len-1) || (rowIndex+1) % rowspans[i] === 0){  
61.                         p.css += ' rowspan';  
62.                     }else{  
63.                         p.css += ' rowspan-unborder';  
64.                     }  
65.                 }  
66.                 //------------------------------------------------  
67.                 cb[cb.length] = ct.apply(p);  
68.             }  
69.             var alt = [];  
70.             if(stripe && ((rowIndex+1) % 2 === 0)){  
71.                 alt[0] = "x-grid3-row-alt";  
72.             }  
73.             if(r.dirty){  
74.                 alt[1] = " x-grid3-dirty-row";  
75.             }  
76.             rp.cols = colCount;  
77.             if(this.getRowClass){  
78.                 alt[2] = this.getRowClass(r, rowIndex, rp, ds);  
79.             }  
80.             rp.alt = alt.join(" ");  
81.             rp.cells = cb.join("");  
82.             buf[buf.length] =  rt.apply(rp);  
83.         }  
84.         return buf.join("");  
85.     }  
86. });  

3.创建grid

a. 创建列模型时，在需要合并行的列模型中加入配置：“rowspan:行数”（不含双引号）

Java代码  ​​​​

2. {header: 'Company', dataIndex: 'company', rowspan:4}//本列每4行合并为1行  

b. 创建grid时，为grid配置：“cls:'rowspan-grid',view: new Ext.ux.grid.RowspanView()”

Java代码  ​​​​

2. // create the Grid  
3.   var grid = new Ext.grid.GridPanel({  
4.       title: 'Extjs实现行合并(rowspan)效果',  
5.       store: store,  
6.       sm:sm,  
7.       cm:cm,  
8.       stripeRows: true,  
9.       cls: 'rowspan-grid', //******必须配置此样式  
10.       view: new Ext.ux.grid.RowspanView() //****使用view  
11.   });  

4.预览效果

5.瑕疵

  由于ie6以外的浏览器的盒模型比较怪异（主因还是我自身不擅处理CSS），列头与数据列的边框有些对不齐（当前的效果已经是尽了最大努力了）；

  由于“border-left: 2px solid transparent”中的transparent在ie6下显示黑色，本人对hack又不擅长（＝。＝都不知道自己到底擅长什么了），所以就干脆将 transparent全部用白色替换了（效果会差一些），如果能直接对ie6进行hack的话，应该会完美一点

6.注意
  从效果图上可以看出，合并行的区域，只显示合并行中的第一行数据，但这并不是分组效果！而是通过view中的cleanRenderer方法将“第x个rowspan区域的非第一行数据”直接返回空串而已。并不是将相同的数据合并！

7.demo下载 ​​见附件 ​​