EXTjs grid双层表头的实现

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)

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