extjs3 GridPanel合并复杂列头（行，列）

1.效果图如下

2.表头

var rows=[[
               {},{},
            {header: "项目情况",align: "center", colspan: 8},
            {header: "涉及人口变化（人次）",align: "center", colspan: 10}
          ],[{},{header:"主要内容",align:"center",rowspan:2},
             {header:"项目名称或情况<br>（全部列出）",align:"center",rowspan:2},
             {header:"具体位置<br>（详细）",align:"center",rowspan:2},
             {header:"项目个数<br>（个）",align:"center",rowspan:2},
             {header:"涉及面积<br>（平方米）",align:"center",rowspan:2},
             {header:"数量<br>（个/套/户）",align:"center",rowspan:2},
             {header: "迁出地",align: "center", colspan: 2 },
             {header:"完成进度或预<br>计完成时间",align:"center",rowspan:2},
             {header:"人口增加",align:"center",rowspan:2,colspan: 1},
             {header:"",align:"center", colspan: 1,rowspan:1},
             {header:"人口减少",align:"center",rowspan:2},
             {header:"",align:"center", colspan:4 ,rowspan:1},
             {header:"居住人口",align:"center",rowspan:2},
             {header:"就业人口",align:"center",rowspan:2},
             {header:"其他",align:"center",rowspan:2}
    ],[{},{header:"京内<br>（具体到区）",align:"center",colspan: 1 ,rowspan:1},
         {header:"京外<br>（具体到地级市）",align:"center",colspan: 1 ,rowspan:1},
         {header:"其中：外来<br>人口增加",align:"center",colspan: 1 ,rowspan:1},
         {header:"其中：外来<br>人口减少",align:"center",colspan: 1 ,rowspan:1},
         {header:"留在本区",align:"center",rowspan:1},
         {header:"流向本市<br>其地区",align:"center",colspan: 1 ,rowspan:1},
         {header:"离开本市",align:"center",colspan: 1 ,rowspan:1}
     ]];
var cm = new Ext.grid.ColumnModel({
   columns:[
              new Ext.grid.RowNumberer({width:30}),
             {header:"甲",width:210,dataIndex:'itemName',align:"center"},
             {header:"1",width:150,dataIndex:'projecName',align:"center",rowspan : true,xtype: 'gridcolumn'},
             {header:"2",width:150,dataIndex:'address',align:"center",rowspan : true,xtype: 'gridcolumn'},
             {header:"3",width:80,dataIndex:'projectNum',align:"center",renderer:setData},
             {header:"4",width:80,dataIndex:'aboutArea',align:"center",renderer:setData},
             {header:"5",width:80,dataIndex:'amount',align:"center",renderer:setData},
             {header:"6",width:100,dataIndex:'stayBjAddress',align:"center",rowspan : true,xtype: 'gridcolumn'},
             {header:"7",width:100,dataIndex:'outBjAddress',align:"center",rowspan : true,xtype: 'gridcolumn'},
             {header:"8",width:100,dataIndex:'endTime',align:"center",rowspan : true,xtype: 'gridcolumn'},
             {header:"9",width:80,dataIndex:'peopleAddNum',align:"center"},
             {header:"10",width:80,dataIndex:'outPeopleAdd',align:"center"},
             {header:"11",width:80,dataIndex:'peopleMinus',align:"center"},
             {header:"11",width:80,dataIndex:'outPeopleMinus',align:"center"},
             {header:"13",width:80,dataIndex:'stayInArea',align:"center"},
             {header:"14",width:80,dataIndex:'stayOutInbj',align:"center"},
             {header:"15",width:80,dataIndex:'leaveBj',align:"center"},
             {header:"16",width:80,dataIndex:'residentPopulation'},
             {header:"17",width:80,dataIndex:'employmentPopulation',},
             {header:"18",width:80,dataIndex:'other',align:"center"}
    ],
    rows:rows
   });

3.在gridPanel中引入插件

var mainGrid=new Ext.grid.GridPanel({
     loadMask:'正在加载数据，请稍候...',
     cm:cm,
     sm:sm,
     store:store,
     columnLines : true,
     plugins: new Ext.tet.plugins.GroupHeaderGrid(),//插件
     iconCls:'grid'
});

4.引入GroupHeaderGrid.js

Ext.namespace("Ext.tet.plugins");

Ext.tet.plugins.GroupHeaderGrid = function(config) {
Ext.apply(this, config);
};

Ext.extend(Ext.tet.plugins.GroupHeaderGrid, Ext.util.Observable, {
init: function(grid) {
var v = grid.getView();
v.beforeMethod('initTemplates', this.initTemplates);
v.renderHeaders = this.renderHeaders.createDelegate(v, [v.renderHeaders]);
v.afterMethod('onColumnWidthUpdated', this.updateGroupStyles);
v.afterMethod('onAllColumnWidthsUpdated', this.updateGroupStyles);
v.afterMethod('onColumnHiddenUpdated', this.updateGroupStyles);
v.getHeaderCell = this.getHeaderCell;
v.updateSortIcon = this.updateSortIcon;
v.getGroupStyle = this.getGroupStyle;
},

initTemplates: function() {
var ts = this.templates || {};
if (!ts.gheader) {
   ts.gheader = new Ext.Template(
    '<table border="0" cellspacing="0" cellpadding="0" class="ux-grid-group-table" style="{tstyle}">',
    '<thead>{rows}{header}</thead>',
    '</table>'
   );
}
if (!ts.header) {
   ts.header = new Ext.Template(
    '<tr class="x-grid3-hd-row">{cells}</tr>'
   );
}
if (!ts.gcell) {
   ts.gcell = new Ext.Template(
    '<td class="x-grid3-hd {cls} x-grid3-td-{id}" style="{style}" rowspan="{rowspan}" colspan="{colspan}">',
    '<div {tooltip} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">{value}</div>',
    '</td>'
   );
}
this.templates = ts;
},

renderHeaders: function(renderHeaders) {
var ts = this.templates, rows = [], table = [];
for (var i = 0; i < this.cm.rows.length; i++) {
   var r = this.cm.rows[i], cells = [], col = 0;
   for (var j = 0; j < r.length; j++) {
    var c = r[j];
    c.colspan = c.colspan || 1;
    c.rowspan = c.rowspan || 1;
    while (table[i] && table[i][col]) {
     col++;
    }
    c.col = col;
    for (var rs = i; rs < i + c.rowspan; rs++) {
     if (!table[rs]) {
      table[rs] = [];
     }
     for (var cs = col; cs < col + c.colspan; cs++) {
      table[rs][cs] = true;
     }
    }
    var gs = this.getGroupStyle(c);
    cells[j] = ts.gcell.apply({
     id: c.id || i + '-' + col,
     cls: c.header ? 'ux-grid-hd-group-cell' : 'ux-grid-hd-nogroup-cell',
     style: 'width:' + gs.width + ';' + (gs.hidden ? 'display:none;' : '') + (c.align ? 'text-align:' + c.align + ';' : ''),
     rowspan: c.rowspan,
     colspan: gs.colspan,
     tooltip: c.tooltip ? (Ext.QuickTips.isEnabled() ? 'ext:qtip' : 'title') + '="' + c.tooltip + '"' : '',
     value: c.header || ' ',
     istyle: c.align == 'right' ? 'padding-right:16px' : ''
    });
   }
   rows[i] = ts.header.apply({
    cells: cells.join('')
   });
}
return ts.gheader.apply({
   tstyle: 'width:' + this.getTotalWidth() + ';',
   rows: rows.join(''),
   header: renderHeaders.call(this)
});
},

getGroupStyle: function(c) {
var w = 0, h = true, cs = 0;
for (var i = c.col; i < c.col + c.colspan; i++) {
   if (!this.cm.isHidden(i)) {
    var cw = this.cm.getColumnWidth(i);
    if(typeof cw == 'number'){
     w += cw;
    }
    h = false;
    cs++;
   }
}
return {
   width: (Ext.isBorderBox ? w : Math.max(w - this.borderWidth, 0)) + 'px',
   hidden: h,
   colspan: cs || 1
}
},

updateGroupStyles: function(col) {
var rows = this.mainHd.query('tr.x-grid3-hd-row');
for (var i = 0; i < rows.length - 1; i++) {
   var cells = rows[i].childNodes;
   for (var j = 0; j < cells.length; j++) {
    var c = this.cm.rows[i][j];
    if ((typeof col != 'number') || (col >= c.col && col < c.col + c.colspan)) {
     var gs = this.getGroupStyle(c);
     cells[j].style.width = gs.width;
     cells[j].style.display = gs.hidden ? 'none' : '';
     cells[j].colSpan = gs.colspan;
    }
   }
}
},

getHeaderCell : function(index){
return this.mainHd.query('td.x-grid3-cell')[index];
},

updateSortIcon : function(col, dir){
var sc = this.sortClasses;
var hds = this.mainHd.select('td.x-grid3-cell').removeClass(sc);
hds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]);
}
});

5.css样式

.x-grid3 table {table-layout: auto;}

.x-grid3-cell-inner, .x-grid3-hd-inner{ white-space: normal; }
.x-toolbar td, .x-toolbar span, .x-toolbar input, .x-toolbar div, .x-toolbar select, .x-toolbar label {
white-space: normal;

}

6.一些特殊样式需要自己修改

extjs3 GridPanel合并复杂列头（行 ，列）

猜你喜欢

extjs3 GridPanel合并复杂列头（行，列）