EXTJS 双层表头 记录

 

 

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)