グリッド：ツリーグリッド

データ項目に子項目のコレクションが含まれる場合は、FlexGridのchildItemsPathを使用して、データをツリーで表示することができます。

たとえば、「children」プロパティを持つ「person」オブジェクトのリストがあるとします。「children」プロパティにも、さらに「person」オブジェクトの配列が含まれます。これは、同種階層と呼ばれることもあります。

次のグリッドは、グリッドを最上位のpersonリストに結合し、childItemsPathプロパティを「children」に設定して作成されました。

import * as wjGrid from '@mescius/wijmo.grid';

// 家系図のデータ（同種コレクション）
var family = [
    { name: 'Albert', children: [
        { name: 'Anton' },
        { name: 'Annette' },
    ]},
    { name: 'Benjamin', children: [
        { name: 'Bridget', children: [
        { name: 'Billy' },
        { name: 'Bernard' },
    ]},
        { name: 'Bella' },
        { name: 'Bob' },
    ]},
    { name: 'Charlie', children: [
        { name: 'Chris' },
        { name: 'Connie' },
        { name: 'Carrie' },
    ]},
    { name: 'Douglas', children: [
        { name: 'Dinah' },
        { name: 'Donald' }
    ]}
];

// 家系図
var familyGrid = new wjGrid.FlexGrid('#familyGrid', {
    headersVisibility: 'None',
    childItemsPath: 'children',
    itemsSource: family
});

異なるレベルの項目がそれぞれ異なるタイプと異なる子項目プロパティを持つ「異種」階層もあります。

たとえば、次のグリッドは、「earnings」（給与）がリストされた「checks」（小切手）を受け取る「worker」（従業員）オブジェクトのコレクションに連結されています。

import * as wjGrid from '@mescius/wijmo.grid';

// 従業員ツリーデータ（同種コレクション）
var workers = [
    {
        name: '成宮 真紀',
        checks: [{
            name: '1月',
            earnings: [
                { name: '通常勤務', hours: 30.0, rate: 15.0 },
                { name: '残業手当', hours: 10.0, rate: 20.0 },
                { name: 'ボーナス', hours: 5.0, rate: 30.0 }
            ]
        }, {
            name: '2月',
            earnings: [
                { name: '通常勤務', hours: 20.0, rate: 18.0 },
                { name: '残業手当', hours: 20.0, rate: 24.0 }
            ]
        }]
    }, {
        name: '山本 雅治',
        checks: [{
            name: '1月',
            earnings: [
                { name: '通常勤務', hours: 30.0, rate: 15.0 },
                { name: '残業手当', hours: 10.0, rate: 20.0 },
                { name: 'ボーナス', hours: 5.0, rate: 30.0 }
            ]
        }, {
            name: '2月',
            earnings: [
                { name: '通常勤務', hours: 20.0, rate: 18.0 },
                { name: '残業手当', hours: 20.0, rate: 24.0 }
            ]
        }]
    }, {
        name: '加藤 泰江',
        checks: [{
            name: '1月',
            earnings: [
                { name: '通常勤務', hours: 30.0, rate: 15.0 },
                { name: '残業手当', hours: 10.0, rate: 20.0 },
                { name: 'ボーナス', hours: 5.0, rate: 30.0 }
            ]
        }, {
            name: '2月',
            earnings: [
                { name: '通常勤務', hours: 20.0, rate: 18.0 },
                { name: '残業手当', hours: 20.0, rate: 24.0 }
            ]
        }]
    }
];

// 従業員ツリー
var workersGrid = new wjGrid.FlexGrid('#workersGrid', {
    headersVisibility: 'Column',
    childItemsPath: ['checks','earnings'],
    autoGenerateColumns: false,
    columns: [
        { binding: 'name' },
        { binding: 'hours', dataType: 'Number' },
        { binding: 'rate', dataType: 'Number' }
    ],
    itemsSource: workers
});