您的位置：首页 > Web前端 > JavaScript

EXTjs grid双层表头的实现

2009-07-08 09:28 337 查看

EXTjs grid双层表头的实现

想要吗?

源代码:
加载到页面中的js文件
GridDoubleHeader.js

/*******************************************************************************
* @author
* @since
* @description 双层表头
* @param{}
* mtext 表头名
* @param{}
* mcol 向后跨越子表头个数
* @param{}
* mwidth 上至下第一层表头的宽度,即父表头的宽度
* @class MyGridView
* @extends Ext.grid.GridView
*/

MyGridView = Ext.extend(Ext.grid.GridView, {
renderHeaders : function() {
var cm = this.cm, ts = this.templates;
var ct = ts.hcell, ct2 = ts.mhcell;
var cb = [], sb = [], p = {}, mcb = [];
for (var i = 0, len = cm.getColumnCount(); i < len; i++) {
p.id = cm.getColumnId(i);
p.value = cm.getColumnHeader(i) || "";
p.style = this.getColumnStyle(i, true);
if (cm.config[i].align == 'right') {
p.istyle = 'padding-right:16px';
}
cb[cb.length] = ct.apply(p);
if (cm.config[i].mtext)
mcb[mcb.length] = ct2.apply({
value : cm.config[i].mtext,
mcols : cm.config[i].mcol,
mwidth : cm.config[i].mwidth
});
}
var s = ts.header.apply({
cells : cb.join(""),
tstyle : 'width:' + this.getTotalWidth() + ';',
mergecells : mcb.join("")
});
return s;
}
});
viewConfig = {
templates : {
header : new Ext.Template(
' <table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
' <thead> <tr class="x-grid3-hd-row">{mergecells} </tr>'
+ ' <tr class="x-grid3-hd-row">{cells} </tr> </thead>',
" </table>"),
mhcell : new Ext.Template(
' <td class="x-grid3-header" colspan="{mcols}" style="width:{mwidth}px;"> <div align="center">{value}</div>',
" </td>")
}
};

这个文件在打开页面的时候加载它就可以了,通过实例你就知道该怎么用它了

实例:

grid的CM

var ldrk_cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer({
mtext : " ",//给父表头取的名字
mcol : 1,//包含了几列
mwidth : 20,//子表头宽度
width : 20,//被包含子表头的宽度,最好填写一下
header : "No."
}), {
mtext : "本地住址<br>或",
mcol : 1,
mwidth : 190,
width : 200,
header : "<div align='center'>管理单位</div>",
dataIndex : "address"
}, {
mtext : " ",
mcol : 1,
mwidth : 80,
width : 80,
header : "<div align='center'>姓名</div>",
sortable : true,
dataIndex : "name"
}, {
mtext : "<br>性",
mcol : 1,
mwidth : 30,
width : 30,
header : "<div align='center'>别</div>",
sortable : true,
dataIndex : "sex"
}, {
mtext : " ",
mcol : 1,
mwidth : 80,
width : 80,
header : "<div align='center'>出生年月</div>",
dataIndex : "birthday"
}, {
mtext : " ",
mcol : 1,
mwidth : 80,
width : 90,
header : "<div align='center'>结婚年月</div>",
dataIndex : "marryDate"
}, {
mtext : " ",
mcol : 1,
mwidth : 100,
width : 110,
header : "<div align='center'>流动方向</div>",
dataIndex : "moveAspect"
}, {
mtext : "流入人口填户籍地名<br>流出人口填流向地名",
mcol : 1,
mwidth : 200,
width : 200,
header : "<div align='center'>流入(出)地名</div>",
dataIndex : "placename"
}, {
mtext : "流入<br>(出)",
mcol : 1,
mwidth : 80,
width : 80,
header : "<div align='center'>年月</div>",
dataIndex : "moveDate"
}, {
mtext : "离开<br>或返回",
mcol : 1,
mwidth : 80,
width : 80,
header : "<div align='center'>年月</div>",
dataIndex : "comeDate"
}, {
mtext : "流入(出)<br>初期子女",
mcol : 2,
mwidth : 100,
width : 50,
header : "<div align='center'>男</div>",
dataIndex : "man"
}, {
width : 50,
header : "<div align='center'>女</div>",
dataIndex : "woman"
}, {
mtext : "流入(出)<br>初期避孕情况",
mcol : 2,
mwidth : 160,
width : 80,
header : "<div align='center'>采取措施名称</div>",
dataIndex : "measureName"
}, {
width : 80,
header : "<div align='center'>起始年月</div>",
dataIndex : "startDate"
}, {
mtext : "流动人口<br>婚育证明发验情况</div>",
mcol : 4,
mwidth : 320,
width : 80,
header : "<div align='center'>发证年月</div>",
dataIndex : "certificateDate"
}, {
width : 80,
header : "<div align='center'>查验年月</div>",
dataIndex : "checkDate"
}, {
width : 80,
header : "<div align='center'>查验结果</div>",
dataIndex : "checkResult"
}, {
width : 80,
header : "<div align='center'>证件编号</div>",
dataIndex : "certificateNo"
}]);

cm中设置完成后还要在grid中调用之前提到的插件

其实很简单,只需要在grid中调用这句话话就可以了

view : new MyGridView(viewConfig)

这个版本算是网络上流传的最完善版本了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航