4

extjsで以下のグリッドのようなヘッダーをグループ化する方法：

|-------------- A1ヘッダー------------|-------------- B1ヘッダー---- ----------- |

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

| ----- A2Data ------ |----A3データ------|-----B2データ------|-----B3データ-- ----- |

| ----- 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' }
        ]);
4

3 に答える 3

3

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 のカウントを保持するいくつかの colspan 変数 (私はそれらに len nという名前を付けます) を初期化することを忘れないでください(この例で'A1 header'は 2 つの子'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 プラグインのグリッド幅を構成することです。プロパティを使用

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

columns : Row4contentsグリッドとfields : fieldsグリッドのストアに設定します。

ハッピーコーディング！

于 2011-06-05T10:10:44.710 に答える
2

これを参照してください：

列ヘッダー グループ

于 2011-06-03T12:10:24.230 に答える
0

これはSenchaによる素晴らしい例です

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

于 2014-07-14T11:40:02.543 に答える