jQuery EasyUI Menú de árbol -Menú de árbol cargando nodos padre/hijo

La forma habitual de representar un nodo de árbol es almacenar un parentid en cada nodo. Esto también se conoce como modelo de lista de adyacencia. No está permitido cargar estos datos directamente en el menú de árbol (Tree). Pero podemos convertirlos al formato de datos estándar del menú de árbol (Tree) antes de cargarlos. El complemento Tree (Árbol) proporciona una función de opción 'loadFilter' que puede realizar esta función. Ofrece la oportunidad de cambiar cualquier dato entrante. Este tutorial le muestra cómo usar la función 'loadFilter' para cargar nodos padre/hijo en el menú de árbol (Tree).

Datos de nodos padre/hijo

    [
    {"id":1,"parendId":0,"name":"Foods"},
    {"id":2,"parentId":1,"name":"Fruits"},
    {"id":3,"parentId":1,"name":"Vegetables"},
    {"id":4,"parentId":2,"name":"apple"},
    {"id":5,"parentId":2,"name":"orange"},
    {"id":6,"parentId":3,"name":"tomato"},
    {"id":7,"parentId":3,"name":"carrot"},
    {"id":8,"parentId":3,"name":"cabbage"},
    {"id":9,"parentId":3,"name":"potato"},
    {"id":10,"parentId":3,"name":"lettuce"}
    ]

Crear un menú de árbol (Tree) usando 'loadFilter'

    $('#tt').tree({
        url: 'data/tree6_data.json',
        loadFilter: function(rows){
            return convert(rows);
        }
    });

Implementación de la conversión

    function convert(rows){
        function exists(rows, parentId){
            for(var i=0; i<rows.length; i++){
                if (rows[i].id == parentId) return true;
            }
            return false;
        }
        
        var nodes = [];
        // get the top level nodes
        for(var i=0; i<rows.length; i++){
            var row = rows[i];
            if (!exists(rows, row.parentId)){
                nodes.push({
                    id:row.id,
                    text:row.name
                });
            }
        }
        
        var toDo = [];
        for(var i=0; i<nodes.length; i++){
            toDo.push(nodes[i]);
        }
        while(toDo.length){
            var node = toDo.shift();    // the parent node
            // get the children nodes
            for(var i=0; i<rows.length; i++){
                var row = rows[i];
                if (row.parentId == node.id){
                    var child = {id:row.id,text:row.name};
                    if (node.children){
                        node.children.push(child);
                    } else {
                        node.children = [child];
                    }
                    toDo.push(child);
                }
            }
        }
        return nodes;
    }

Descargar el ejemplo de jQuery EasyUI

jeasyui-tree-tree6.zip