jQuery EasyUI Menú de árbol -Carga diferida de nodos de la cuadrícula de árbol

A veces ya tenemos los datos de una cuadrícula de árbol (TreeGrid) completamente jerarquizada. También queremos que la cuadrícula de árbol (TreeGrid) cargue nodos de forma diferida por niveles. Primero, solo se cargan los nodos de nivel superior. Luego, haz clic en el icono de expansión del nodo para cargar sus nodos hijos. Este tutorial muestra cómo crear una cuadrícula de árbol (TreeGrid) con la funcionalidad de carga diferida.

Crear una cuadrícula de árbol (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>

Para cargar los nodos hijos, necesitamos renombrar la propiedad 'children' de cada nodo. Como se muestra en el siguiente código, la propiedad 'children' se renombra como 'children1'. Cuando se expande un nodo, llamamos al método 'append' para cargar los datos de sus nodos hijos.

Código de '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;
    }

Descargar ejemplos de jQuery EasyUI

jeasyui-tree-treegrid5.zip