Extjs 实现多行合并(rowspan)效果
还是一如既往的土方法
/*rowspan grid合并行效果*/.rowspan-grid .x-grid3-body .x-grid3-row { border:none; cursor:default; width:100%;}.rowspan-grid .x-grid3-header .x-grid3-cell{ /*border-left: 2px solid transparent;*//*ie6的transparent下显示黑色?*/ border-left: 2px solid #fff;}.rowspan-grid .x-grid3-body .x-grid3-row{ overflow: hidden; border-right: 1px solid #ccc;}.rowspan-grid .x-grid3-body .x-grid3-cell { border: 1px solid #ccc; border-top:none; border-right:none;}.rowspan-grid .x-grid3-body .x-grid3-cell-first { /*border-left: 1px solid transparent;*/ border-left: 1px solid #fff;}.rowspan-grid .x-grid3-body .rowspan-unborder { /*border-bottom:1px solid transparent;*/ border-bottom:1px solid #fff;}.rowspan-grid .x-grid3-body .rowspan { border-bottom: 1px solid #ccc;}
2.引入Ext.ux.grid.RowspanView对象
Ext.ns('Ext.ux.grid'); /** * 实现grid的rowspan效果 * @author: tipx.iteye.com * * 1.在列模型里需要配置合并行的列中设置rowspan属性，如：{dataIndex:'xxx', header:'xxx', rowspan:3} //该列每三行合并一行 * 2.为grid设置view属性 => view : new Ext.ux.grid.RowspanView() * 3.为grid设置cls属性 => cls : 'rowspan-grid' * 4.加入css样式 */ Ext.ux.grid.RowspanView = Ext.extend(Ext.grid.GridView, { constructor: function(conf) { Ext.ux.grid.RowspanView.superclass.constructor.call(this, conf); }, // private //清除合并的行中，非第一行的数据 cleanRenderer : function(column, value, metaData, record, rowIndex, colIndex, store) { var rowspan = column.rowspan; if(!Ext.isEmpty(rowspan) && rowspan !== 0){ if(rowIndex % rowspan !== 0){ return ''; } } return column.renderer(value, metaData, record, rowIndex, colIndex, store); }, // private doRender : function(cs, rs, ds, startRow, colCount, stripe){ var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1; var tstyle = 'width:'+this.getTotalWidth()+';'; // buffers var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r; //cmConfig列模型 var cmConfig = this.cm.config, rowspans=[]; for(var i = 0, len = cmConfig.length; i < len; i++){ rowspans.push(Math.max((cmConfig[i].rowspan || 0), 0)); } for(var j = 0, len = rs.length; j < len; j++){ r = rs[j]; cb = []; var rowIndex = (j+startRow); for(var i = 0; i < colCount; i++){ c = cs[i]; p.id = c.id; p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : ''); p.attr = p.cellAttr = ""; p.value = this.cleanRenderer(cmConfig[i], r.data[c.name], p, r, rowIndex, i, ds); p.style = c.style; if(Ext.isEmpty(p.value)){ p.value = " "; } if(this.markDirty && r.dirty && typeof r.modified[c.name] !== 'undefined'){ p.css += ' x-grid3-dirty-cell'; } //------------------------------------------------ //添加rowspan类，用样式实现合并行的效果 if(rowspans[i] !== 0){ //每rowspan行以及最后一行加上rowspan类，即加上border-bottom if(j == (len-1) || (rowIndex+1) % rowspans[i] === 0){ p.css += ' rowspan'; }else{ p.css += ' rowspan-unborder'; } } //------------------------------------------------ cb[cb.length] = ct.apply(p); } var alt = []; if(stripe && ((rowIndex+1) % 2 === 0)){ alt[0] = "x-grid3-row-alt"; } if(r.dirty){ alt[1] = " x-grid3-dirty-row"; } rp.cols = colCount; if(this.getRowClass){ alt[2] = this.getRowClass(r, rowIndex, rp, ds); } rp.alt = alt.join(" "); rp.cells = cb.join(""); buf[buf.length] = rt.apply(rp); } return buf.join(""); } });{header: 'Company', dataIndex: 'company', rowspan:4}//本列每4行合并为1行// create the Grid var grid = new Ext.grid.GridPanel({ title: 'Extjs实现行合并(rowspan)效果', store: store, sm:sm, cm:cm, stripeRows: true, cls: 'rowspan-grid', //******必须配置此样式 view: new Ext.ux.grid.RowspanView() //****使用view });