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

Question

如何在 extjs 中对像下面的网格这样的标题进行分组:

|-------------- A1 表头 ------------|-------------- B1 标题 ---------------|

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

|-----A2数据------|----A3数据------|-----B2数据------|-----B3数据-- -----|

|-----A2数据------|----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

我记得我花了很多时间试图理解为 ColumnHeaderGroup 提供的示例 Sencha 中的代码。几天前我做了一个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}}}
    }
};

您需要一些数组来放置标题:这些数组将是列标题组中的行。您还需要一个 fields 数组:它将包含您商店的字段。不要忘记初始化一些 colspan 变量(我将它们命名为 len n )，它们将保持每个列标题的 colspan 计数(在本例中 'A1 header' 有 2 个 child ，而 'A2Header' 只有 1 个)，还有一些宽度变量 (wid n )，用于每个标题的宽度。

var Row1contents = [], Row2contents = [], Row3contents = [], Row4contents = [];
var len1 = 0, len2 = 0, len3=0, wid1 = 0, wid2 = 0, wid3 = 0;
var fields = [];

现在你终于可以解析 chstructure为了检索列标题。使用 Ext.iterate为了那个原因:

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;
});

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

plugins: [new Ext.ux.grid.ColumnHeaderGroup({
    rows: [Row1Group, Row2Group, Row3Group]
});

套装 columns : Row4contents用于您的网格和 fields : fields为您的网格商店。

快乐编码!