グリッド：非連結ツリーグリッド

非連結モードを使用する場合は、行と列をコードで追加してツリーを作成することもできます。

配列をデータソースとして使用します。FlexGridを初期化しますが、配列には連結しません。

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

// 非連結従業員ツリー
var uwt = new wjGrid.FlexGrid('#workersGrid', {
    headersVisibility: 'Column',
    selectionMode: 'Row',
    beginningEdit: function(s, e) {
        var value = e.panel.getCellData(e.row, e.col);
        if (value == null) {
            e.cancel = true; // 編集できません
        }
    }
});    

列を追加し、プロパティを定義します。

// 非連結従業員ツリー
var uwt = new wjGrid.FlexGrid('#workersGrid', {
    headersVisibility: 'Column',
    selectionMode: 'Row',
    beginningEdit: function(s, e) {
        var value = e.panel.getCellData(e.row, e.col);
        if (value == null) {
            e.cancel = true; // 編集できません
        }
    }
});

配列をループ処理し、グループの行とセルを追加します。

    // 行を追加します
for (var w = 0; w < workers.length; w++) {
    // workerを追加します
    var worker = workers[w];
    var row = new wjGrid.GroupRow(worker);
    row.isReadOnly = false;
    row.level = 0;
    uwt.rows.push(row);
    uwt.setCellData(row.index, 0, worker.name);
    for (var c = 0; c < worker.checks.length; c++) {
        // checkを追加します
        var check = worker.checks[c];
        row = new wjGrid.GroupRow(check);
        row.isReadOnly = false;
        row.level = 1;
        uwt.rows.push(row);
        uwt.setCellData(row.index, 0, check.name);
        for (var e = 0; e < check.earnings.length; e++) {
            // earningを追加します
            var earning = check.earnings[e];
            row = new wjGrid.GroupRow(earning);
            row.isReadOnly = false;
            row.level = 2;
            uwt.rows.push(row);
            uwt.setCellData(row.index, 0, earning.name);
            uwt.setCellData(row.index, 1, earning.hours);
            uwt.setCellData(row.index, 2, earning.rate);
        }
    }
}