jQuery EasyUI Tree Menu – Loading Parent/Child Nodes

Typically, a tree node is represented by storing a parentId for each node. This is also known as the adjacency list model. Directly loading this data into a Tree is not allowed. However, we can convert it to the standard Tree data format before loading the Tree. The Tree plugin provides a 'loadFilter' option function that can achieve this. It provides an opportunity to change any incoming data. This tutorial shows you how to use the 'loadFilter' function to load parent/child nodes into a Tree.

Parent/Child Node Data

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

Using 'loadFilter' to Create the Tree

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

Conversion Implementation

function convert(rows){
    function exists(rows, parentId){
        for(var i=0; i<rows.length; i++){
            if (rows.id == parentId) return true;
        }
        return false;
    }

    var nodes = [];
    // get the top level nodes
    for(var i=0; i<rows.length; i++){
        var row = rows;
        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);
    }

    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;
            if (row.parentId == node.id){
                var child = {id:row.id,text:row.name};
                if (node.children){
                    node.children.push(child);
                } else {
                    node.children = ;
                }
                toDo.push(child);
            }
        }
    }
    return nodes;
}

Download jQuery EasyUI Example

jeasyui-tree-tree6.zip