Extjs 實現多行合並(rowspan)效果

引用

聲明：
  本效果的本質，只是用css去除邊框而已，不包含分組功能。
  代碼在IE6-8, FF3下測試通過
  代碼依賴於Extjs 3.x

1.加入css樣式

/*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 = "&#160;";
                }
                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("");
    }
});

3.創建grid
a. 創建列模型時，在需要合並行的列模型中加入配置：“rowspan:行數”（不含雙引號）

{header: 'Company', dataIndex: 'company', rowspan:4}//本列每4行合並為1行

b. 創建grid時，為grid配置：“cls:'rowspan-grid',view: new Ext.ux.grid.RowspanView()”

// 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
  });

4.預覽效果



5.瑕疵
  由於ie6以外的瀏覽器的盒模型比較怪異（主因還是我自身不擅處理CSS），列頭與數據列的邊框有些對不齊（當前的效果已經是盡了最大努力了）；

  由於“border-left: 2px solid transparent”中的transparent在ie6下顯示黑色，本人對hack又不擅長（＝。＝都不知道自己到底擅長什么了），所以就干脆將 transparent全部用白色替換了（效果會差一些），如果能直接對ie6進行hack的話，應該會完美一點

6.注意
  從效果圖上可以看出，合並行的區域，只顯示合並行中的第一行數據，但這並不是分組效果！而是通過view中的cleanRenderer方法將“第x個rowspan區域的非第一行數據”直接返回空串而已。並不是將相同的數據合並！

7.demo下載
見附件