Question

如何在extjs中对下面的网格进行分组：

| -------------- A1标题 ------------ | ---------- ---- B1标题 --------------- |

| ----的 A2Header --- | ---的 A3Header --- | ----的 B2Header --- | ---的 B3Header ------ |

| ----- A2Data ------ | ---- A3数据------ | ----- B2数据------ | ----- B3数据------- |

我的代码extjs：

    plColModel = new Ext.grid.ColumnModel([

    new Ext.grid.RowNumberer(),
    { header: "A2Header", dataIndex: 'A2Data' },
    { header: "A3Header", dataIndex: 'A3Data' },
    { header: "B2Header", dataIndex: 'B2Data' },
    { header: "B3Header", dataIndex: 'B3Data' }
        ]);

Answer 1

我记得我是如何花费大量时间来理解Sencha为ColumnHeaderGroup提供的示例中的代码。几天前我已经制作了一个6级列组头，并不是那么困难。

将所有列标题放在对象中作为以下标题的对象键。最后标题的关注者将是列的属性：

var chstructure = {
    'A1 header' : {
        'A2Header' : {'A2Data' : {'A2Data' : {'dataIndex' : 'A2', 'width' : 100}}},
        'A3Header' : {'A3Data' : {'A3Data' : {'dataIndex' : 'A3', 'width' : 100}}}
    },
    'B1 header' : {
        'B2Header' : {'B2Data' : {'B2Data' : {'dataIndex' : 'B2', 'width' : 100}}},
        'B3Header' : {'B3Data' : {'B3Data' : {'dataIndex' : 'B3', 'width' : 100}}}
    }
};

您需要一些数组来放入标题：这些数组将是列标题组中的行。您还需要一个字段数组：它将包含商店的字段。不要忘记初始化一些colspan变量（我将它们命名为len n ），这将保留每个列标题的colspan计数（在此示例中'A1 header'有2个子项和{对于每个标题的宽度，{1}}只有1）和一些宽度变量（wid n ）。

'A2Header'

现在您可以最终解析var Row1contents = [], Row2contents = [], Row3contents = [], Row4contents = []; var len1 = 0, len2 = 0, len3=0, wid1 = 0, wid2 = 0, wid3 = 0; var fields = [];以检索列标题。请使用chstructure：

Ext.iterate

查看控制台中的4个阵列，确保它们包含您设置的所有数据。最后一步是配置ColumnHeaderGroup插件的网格宽度。使用属性

Ext.iterate (chstructure, function(Row1, Row1structure){
    Ext.iterate (Row1structure, function(Row2, Row2structure){
        Ext.iterate (Row2structure, function(Row3, Row3structure){
            Ext.iterate (Row3contents, function(Row4, Row4structure){
                len1++;len2++;len3++;
                wid1+=Row4structure['width'];
                wid2+=Row4structure['width'];
                wid3+=Row4structure['width'];
                Row4contents.push({
                    dataIndex: Row4structure['dataIndex'],
                    header: Row4,
                    width: Row4structure['width']
                });
                fields.push({
                    type: 'int', // may be 'string'
                    name: Row4structure['dataIndex']
                });
            });
            Row3contents.push({
                header: Row3,
                width: wid3,
                colspan: len3
            });
            len3=wid3=0;
        });
        Row2contents.push({
            header: Row2,
            width: wid2,
            colspan: len2
        });
        len2=wid2=0;
    });
    Row1contents.push({
        header: Row1,
        width: wid1,
        colspan: len1
    });
    len1=wid1=0;
});

为您的网格设置plugins: [new Ext.ux.grid.ColumnHeaderGroup({ rows: [Row1Group, Row2Group, Row3Group] });，为网格商店设置columns : Row4contents。

快乐的编码！

Answer 2

参考：

ColumnHeaderGroup

Answer 3

这是Sencha的一个很好的例子

http://dev.sencha.com/deploy/ext-3.4.0/examples/pivotgrid/people.html

如何在extjs中对标题网格进行分组？

3 个答案: