先看看效果

效果不錯吧,就是樣式稍微差點,沒辦法Extjs的表頭是漸變的,不過樣式改起來應該不難.

接下來是數據:

"{columModle:[{header:\"用電單位\",dataIndex:\"用電單位\"},

{header:\"2009-06 _度數\",dataIndex:\"2009-06 _度數\"},

{header:\"2009-06 _單價\",dataIndex:\"2009-06 _單價\"},

?{header:\"2009-06 _金額\",dataIndex:\"2009-06 _金額\"},

?{header:\"2009-07 _度數\",dataIndex:\"2009-07 _度數\"},

?{header:\"2009-07 _單價\",dataIndex:\"2009-07 _單價\"},

?{header:\"2009-07 _金額\",dataIndex:\"2009-07 _金額\"},

{header:\"2009-08 _度數\",dataIndex:\"2009-08 _度數\"},

{header:\"2009-08 _單價\",dataIndex:\"2009-08 _單價\"},

?{header:\"2009-08 _金額\",dataIndex:\"2009-08 _金額\"},

?{header:\"合計_度數\",dataIndex:\"合計_度數\"},

?{header:\"合計_金額\",dataIndex:\"合計_金額\"}],

?fieldsNames:[{name:\"用電單位\"},{name:\"2009-06 _度數\"},{name:\"2009-06 _單價\"},{name:\"2009-06 _金額\"},{name:\"2009-07 _度數\"},

{name:\"2009-07 _單價\"},{name:\"2009-07 _金額\"},{name:\"2009-08 _度數\"},{name:\"2009-08 _單價\"},{name:\"2009-08 _金額\"},

{name:\"合計_度數\"},{name:\"合計_金額\"}],

?data:[{\"用電單位\":\"1\",\"2009-06 _度數\":\"\",\"2009-06 _單價\":\"\",\"2009-06 _金額\":\"\",\"2009-07 _度數\":\"1.00\",\"2009-07 _單價\":\"2.00\",\"2009-07 _金額\":\"2.0000\",\"2009-08 _度數\":\"4.00\",\"2009-08 _單價\":\"2.00\",\"2009-08 _金額\":\"8.0000\",\"合計_度數\":\"5.00\",\"合計_金額\":\"10.0000\"}]}"

主要是紅色的部分

然后是js:

? Ext.onReady(function() {
??????????? var conn = new Ext.data.Connection();
??????????? conn.request({ url: 'FuelCompany.ashx', callback: function(options, success, response) {
??????????????? var a = response.responseText;
??????????????? var json = new Ext.util.JSON.decode(a);
??????????????? var jsonrows = "[[";
??????????????? var rows = {};
??????????????? var _temp = [];
??????????????? for (var item in json.columModle) {
??????????????????? if (item >= 0) {
??????????????????????? var tempHeader = json.columModle[item].header
??????????????????????? if (tempHeader.split('_').length > 1) {
??????????????????????????? _temp.push(tempHeader.split('_')[0]);
??????????????????????????? json.columModle[item].header = tempHeader.split('_')[1];
??????????????????????? }
??????????????????????? else
??????????????????????????? _temp.push("");
??????????????????? }
??????????????? }
??????????????? var i = 1;
??????????????? for (var item in _temp) {
??????????????????? if (item >= 0) {
??????????????????????? if (_temp[item] != _temp[Number(item) + 1]) {
??????????????????????????? jsonrows += "{header:'" + _temp[item] + "',colspan:" + i.toString() + ",align:'center'},";
??????????????????????????? i = 1;
??????????????????????? }
??????????????????????? else
??????????????????????????? i++;
??????????????????? }
??????????????? }
??????????????? jsonrows = jsonrows.substring(0, jsonrows.length - 1);
??????????????? jsonrows += "]]";
??????????????? var cm = new Ext.grid.ColumnModel({
??????????????????? columns: json.columModle,
??????????????????? rows: new Ext.util.JSON.decode(jsonrows)
??????????????? });
??????????????? var ds = new Ext.data.JsonStore({
??????????????????? data: json.data,
??????????????????? fields: json.fieldsNames
??????????????? });
??????????????? var header = new Ext.ux.plugins.GroupHeaderGrid();
??????????????? var grid = new Ext.grid.EditorGridPanel({
??????????????????? height: 400,
??????????????????? region: 'center',
??????????????????? split: true,
??????????????????? border: false,
??????????????????? store: ds,
??????????????????? plugins: [header],
??????????????????? cm: cm,
??????????????????? renderTo: 'Div_CompanyProfile'
??????????????? });
??????????? }
??????????? });
??????? });

注意： Ext.ux.plugins.GroupHeaderGrid類源文件如下圖所示

GroupHeaderPlugin.js文件源碼：

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

Ext.ux.plugins.GroupHeaderGrid = function(config) {

?Ext.apply(this, config);

};

Ext.extend(Ext.ux.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 || '&#160;',

?????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]);

?}

});

總結

以上是生活随笔為你收集整理的ExtJs 实现动态列,动态多表头 在这里添加日志标题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。