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)

评论

1 楼 package 2013-03-06  

不知楼主 是否试过火狐下面报错.....b.firstChild.style is undefied 怎么解决了