jQuery EasyUI Tree Menu -Chargement des nœuds parents/enfants du menu arborescent

La façon habituelle de représenter un nœud d'arbre est de stocker un parentid dans chaque nœud. C'est aussi connu sous le nom de modèle de liste d'adjacence. Charger directement ces données dans le menu arborescent (Tree) n'est pas autorisé. Cependant, nous pouvons les convertir au format de données standard du menu arborescent (Tree) avant de les charger dans le menu arborescent. Le plugin Tree fournit une fonction d'option 'loadFilter' qui peut accomplir cela. Elle permet de modifier toutes les données entrantes. Ce tutoriel vous montre comment utiliser la fonction 'loadFilter' pour charger des nœuds parents/enfants dans le menu arborescent (Tree).

Données des nœuds parent/enfant

    [
    {"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"}
    ]

Créer un menu arborescent (Tree) à l'aide de 'loadFilter'

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

Implémentation de la conversion

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

Télécharger les exemples jQuery EasyUI

jeasyui-tree-tree6.zip