jQuery EasyUI ツリーメニュー -ツリーグリッド遅延読み込みノード

時には、完全な階層ツリーグリッド（TreeGrid）のデータをすでに取得していることもあります。ツリーグリッド（TreeGrid）を階層ごとにノードを遅延読み込みさせたい場合もあります。まず、最上位ノードのみを読み込みます。その後、ノードの展開アイコンをクリックして、その子ノードを読み込みます。このチュートリアルでは、遅延読み込み機能を備えたツリーグリッド（TreeGrid）の作成方法を示します。

ツリーグリッド（TreeGrid）を作成

    <table id="test" title="Folder Browser" class="easyui-treegrid" style="width:700px;height:300px"
            data-options="
                url: 'data/treegrid_data.json',
                method: 'get',
                rownumbers: true,
                idField: 'id',
                treeField: 'name',
                loadFilter: myLoadFilter
            ">
        <thead>
            <tr>
                <th field="name" width="220">Name</th>
                <th field="size" width="100" align="right">Size</th>
                <th field="date" width="150">Modified Date</th>
            </tr>
        </thead>
    </table>

子ノードを読み込むために、各ノードの 'children' プロパティを名前変更する必要があります。次のコードに示すように、'children' プロパティは 'children1' に名前変更されます。ノードを展開するとき、'append' メソッドを呼び出してその子ノードのデータを読み込みます。

'loadFilter' コード

    function myLoadFilter(data,parentId){
        function setData(){
            var todo = [];
            for(var i=0; i<data.length; i++){
                todo.push(data[i]);
            }
            while(todo.length){
                var node = todo.shift();
                if (node.children){
                    node.state = 'closed';
                    node.children1 = node.children;
                    node.children = undefined;
                    todo = todo.concat(node.children1);
                }
            }
        }
        
        setData(data);
        var tg = $(this);
        var opts = tg.treegrid('options');
        opts.onBeforeExpand = function(row){
            if (row.children1){
                tg.treegrid('append',{
                    parent: row[opts.idField],
                    data: row.children1
                });
                row.children1 = undefined;
                tg.treegrid('expand', row[opts.idField]);
            }
            return row.children1 == undefined;
        };
        return data;
    }

jQuery EasyUI インスタンスをダウンロード

jeasyui-tree-treegrid5.zip