Extjs中如何合并多表头 本帖最后由 uczone 于 2010-07-22 22:31:15 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 多表头好像只有Ext2.2例子:Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif';Ext.onReady(function() { new Ext.Viewport({ layout: 'fit', items: [{ xtype: 'grid', title: 'GroupHeaderPlugin Example', store: new Ext.data.SimpleStore({ fields: ['id', 'nr1', 'text1', 'info1', 'special1', 'nr2', 'text2', 'info2', 'special2', 'special3', 'changed'], data: [ ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'] ] }), colModel: new Ext.grid.ColumnModel({ columns: [ {header: 'Id', width: 25, dataIndex: 'id'}, {header: 'Nr', width: 25, dataIndex: 'nr1'}, {header: 'Text', width: 50, dataIndex: 'text1'}, {header: 'Info', width: 50, dataIndex: 'info1'}, {header: 'Special', width: 60, dataIndex: 'special1'}, {header: 'Nr', width: 25, dataIndex: 'nr2'}, {header: 'Text', width: 50, dataIndex: 'text2'}, {header: 'Info', width: 50, dataIndex: 'info2'}, {header: 'Special', width: 60, dataIndex: 'special2'}, {header: 'Special', width: 60, dataIndex: 'special3'}, {header: 'Changed', width: 50, dataIndex: 'changed'} ], defaultSortable: true, rows: [ [ {}, {header: 'Before', colspan: 4, align: 'center'}, {header: 'After', colspan: 4, align: 'center'}, {colspan: 2} ], [ {}, {}, {header: 'Merchandise', colspan: 3, align: 'center'}, {}, {header: 'Merchandise', colspan: 3, align: 'center'}, {header: 'Sum', colspan: 2, align: 'center'} ] ] }), enableColumnMove: false, viewConfig: { forceFit: true }, plugins: [new Ext.ux.plugins.GroupHeaderGrid()] }] });});样式:.x-grid3-header-offset { width: auto;}.ux-grid-hd-group-cell { background: url(../resources/images/default/grid/grid3-hrow.gif) repeat-x bottom;}扩展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.gcell) { ts.gcell = new Ext.Template( '<td class="x-grid3-hd {cls} x-grid3-td-{id}" style="{style}">', '<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 = [], tw = this.getTotalWidth(); 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.col = col; col += c.colspan; 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 + ';' : ''), 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({ tstyle: 'width:' + tw + ';', cells: cells.join('') }); } rows[rows.length] = renderHeaders.call(this); return rows.join(''); }, getGroupStyle: function(c) { var w = 0, h = true; 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; } } return { width: (Ext.isBorderBox ? w : Math.max(w - this.borderWidth, 0)) + 'px', hidden: h } }, updateGroupStyles: function(col) { var tables = this.mainHd.query('.x-grid3-header-offset > table'), tw = this.getTotalWidth(); for (var i = 0; i < tables.length; i++) { tables[i].style.width = tw; if (i < this.cm.rows.length) { var cells = tables[i].firstChild.firstChild.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' : ''; } } } } }, 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]); }}); {header: '序号',align: 'center',sortable: true,dataIndex: 'RunUsed'}//这样达不到居中的效果改为:{header: "<div style='text-align:center'>序号</div>",sortable: true,dataIndex: 'RunUsed'}, 回#1楼 zoujp_xyz 同学 ext3版本中 有Grid Column Header Grouping 这个例子,演示地址为:http://www.sencha.com/deploy/dev/examples/grid/ColumnHeaderGroup.html回#2楼 zoujp_xyz 同学 <div style='text-align:center'>序号</div> 和 align: 'center',的作用都是水平居中的效果能否实现 合并两列表头,并让表名垂直居中显示?谢谢 哦。ext3也出来了1.合并列头你照着写http://www.sencha.com/deploy/dev/examples/grid/column-header-group.js2.我2楼的方法就可以居中显示。如果要垂直居中写个样式 .div { height:25px; line-height:25px; overflow:hidden; } Hi zoujp_xyz 同学,感谢您的回复,我按你的方法写了 也没有办法实现,你可以复制我帖的代码 然后引用:ux/ColumnHeaderGroup.js 和 ux/css/ColumnHeaderGroup.css 这两个文件后试一下看看,确实无效果,你说的是单行垂直 上面的效果 需要的是:多行合并垂直 效果 http://jquery-easyui.wikidot.com/tutorial:datagrid13 回#7楼:jsonj 同学,你这个是jqueryui的吧,小女不才,初学extjs 不知道extjs下可否实现我所需要的效果?谢谢 aspx使用过Jquery-easyUI的进来看看 就是关于javascript在网页中展示幻灯片的问题,不知问题在哪所以请教各位大侠 这俩段代码如何整合呢 网页换肤 请教javascript的中文化问题 JS越弄问题越奇怪了,是我机子的问题吗???? 一个复杂的参数传递问题 inertRow,inertCell应该怎么用啊? 网站图片的问题 关于WebSocket无法连接的问题 用jquery如何把一个页面上的值传到另一个页面上去 请问除了MVC架构模式,前端还有那些常用的架构模式?
例子:Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif';
Ext.onReady(function() {
new Ext.Viewport({
layout: 'fit',
items: [{
xtype: 'grid',
title: 'GroupHeaderPlugin Example',
store: new Ext.data.SimpleStore({
fields: ['id', 'nr1', 'text1', 'info1', 'special1', 'nr2', 'text2', 'info2', 'special2', 'special3', 'changed'],
data: [
['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']
]
}),
colModel: new Ext.grid.ColumnModel({
columns: [
{header: 'Id', width: 25, dataIndex: 'id'},
{header: 'Nr', width: 25, dataIndex: 'nr1'},
{header: 'Text', width: 50, dataIndex: 'text1'},
{header: 'Info', width: 50, dataIndex: 'info1'},
{header: 'Special', width: 60, dataIndex: 'special1'},
{header: 'Nr', width: 25, dataIndex: 'nr2'},
{header: 'Text', width: 50, dataIndex: 'text2'},
{header: 'Info', width: 50, dataIndex: 'info2'},
{header: 'Special', width: 60, dataIndex: 'special2'},
{header: 'Special', width: 60, dataIndex: 'special3'},
{header: 'Changed', width: 50, dataIndex: 'changed'}
],
defaultSortable: true,
rows: [
[
{},
{header: 'Before', colspan: 4, align: 'center'},
{header: 'After', colspan: 4, align: 'center'},
{colspan: 2}
], [
{},
{},
{header: 'Merchandise', colspan: 3, align: 'center'},
{},
{header: 'Merchandise', colspan: 3, align: 'center'},
{header: 'Sum', colspan: 2, align: 'center'}
]
]
}),
enableColumnMove: false,
viewConfig: {
forceFit: true
},
plugins: [new Ext.ux.plugins.GroupHeaderGrid()]
}]
});
});样式:.x-grid3-header-offset {
width: auto;
}
.ux-grid-hd-group-cell {
background: url(../resources/images/default/grid/grid3-hrow.gif) repeat-x bottom;
}
扩展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.gcell) {
ts.gcell = new Ext.Template(
'<td class="x-grid3-hd {cls} x-grid3-td-{id}" style="{style}">',
'<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 = [], tw = this.getTotalWidth();
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.col = col;
col += c.colspan;
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 + ';' : ''),
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({
tstyle: 'width:' + tw + ';',
cells: cells.join('')
});
}
rows[rows.length] = renderHeaders.call(this);
return rows.join('');
}, getGroupStyle: function(c) {
var w = 0, h = true;
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;
}
}
return {
width: (Ext.isBorderBox ? w : Math.max(w - this.borderWidth, 0)) + 'px',
hidden: h
}
}, updateGroupStyles: function(col) {
var tables = this.mainHd.query('.x-grid3-header-offset > table'), tw = this.getTotalWidth();
for (var i = 0; i < tables.length; i++) {
tables[i].style.width = tw;
if (i < this.cm.rows.length) {
var cells = tables[i].firstChild.firstChild.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' : '';
}
}
}
}
}, 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]);
}
});
改为:
{header: "<div style='text-align:center'>序号</div>",sortable: true,dataIndex: 'RunUsed'},
回#2楼 zoujp_xyz 同学 <div style='text-align:center'>序号</div> 和 align: 'center',的作用都是水平居中的效果能否实现 合并两列表头,并让表名垂直居中显示?谢谢
哦。ext3也出来了
1.合并列头你照着写
http://www.sencha.com/deploy/dev/examples/grid/column-header-group.js
2.我2楼的方法就可以居中显示。如果要垂直居中写个样式
.div {
height:25px;
line-height:25px;
overflow:hidden;
}
ux/ColumnHeaderGroup.js 和 ux/css/ColumnHeaderGroup.css 这两个文件后试一下看看,确实无效果,你说的是单行垂直 上面的效果 需要的是:多行合并垂直 效果