グリッド：ツリーグリッドの遅延読み込み

次のツリーグリッドでは、折りたたまれたノードにダミーの子ノードが1個含まれています。ノードを展開すると、他のノードがオンデマンドで読み込まれます。

これが「遅延読み込み」と呼ばれる、よく使用されるパターンです。

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

function init() {
    // グリッドを作成します
    var theGrid = new wjGrid.FlexGrid('#theGrid', {
        childItemsPath: 'children',
        headersVisibility: 'Column',
        groupCollapsedChanged: groupCollapsedChanged,
        autoGenerateColumns: false,
        columns: [
            { binding: 'name', header: '顧客名', width: '*' },
            { binding: 'id', header: 'ID', align: 'center', cssClass: 'id-column' }
        ],
        itemsSource: getData(),
    });

    // 折りたたんで開始します
    theGrid.collapseGroupsToLevel(0);

    // 項目の読み込み時に、行を更新します
    function updateRowCount(grid) {
        document.getElementById('rowCount').textContent = wjCore.Globalize.format(grid.rows.length, 'n0');
    }
    updateRowCount(theGrid);

    // 折りたたまれたノードが展開されたときに、データを読み込みます
    function groupCollapsedChanged(s, e) {
        var row = s.rows[e.row], item = row.dataItem;

        // ダミーの子ノードを1個含むノードを展開したか
        if (!row.isCollapsed &&
            item.children.length == 1 &&
            item.children[0].name == '') {

            // 行の更新中には遅延読み込みを実行できません
            if (s.rows.isUpdating) {
                row.isCollapsed = true;
                return;
            }

            // ダミーの子ノードを実際のノードに置換します
            item.children.length = 0;
            var cnt = Math.round(Math.random() * 5) + 1;
            for (var i = 0; i < cnt; i++) {
                var node = createNode();
                item.children.push(node);
            }

            // ビューをリフレッシュします
            s.collectionView.refresh();

            // 新しい項目の子項目を折りたたみます
            for (var i = row.index + 1; i < s.rows.length; i++) {
                var childRow = s.rows[i];
                if (childRow.level <= row.level) {
                    break;
                }
                childRow.isCollapsed = true;
            }

            // 行数を更新します
            updateRowCount(s);
        }
    }
    var nodeId;
    function createNode(dummy) {
        var first = '佐藤,鈴木,高橋,田中,伊藤,山本,渡辺,中村,小林,加藤,吉田,山田,佐々木,山口,松本,井上,木村,斎藤,林,清水,山崎,阿部,森,池田,橋本,山下,石川,中島,前田,藤田'.split(','), last = '浩,誠,健一,大輔,達也,翔太,浩一,哲也,剛,大介,健太,拓也,豊,修,和彦,学,直樹,健太郎,浩二,徹,隆,亮,翔,恵子,久美子,由美子,明美,直美,陽子,智子,絵美,恵,裕子,愛,真由美,由美,麻衣,美穂,愛美,彩'.split(','), name = dummy ? '' : getOneOf(first) + ' ' + getOneOf(last), children = [];
        if (!dummy) {
            children.push(createNode(true));
        }
        if (nodeId == null)
            nodeId = 0;
        return { id: nodeId++, name: name, children: children };
    }
    function getOneOf(arr) {
        return arr[Math.floor(Math.random() * arr.length)];
    }
    // データを作成/取得します
    function getData() {
        var tree = [];
        tree.push(createNode());
        tree.push(createNode());
        return tree;
    }
}

グリッド：ツリーグリッドの遅延読み込み