Question

I have to retrieve a list of menu item from a database and display it in a tree structure
I want to use the menu name as the node name and menu id as the id of the node.
The method I used was to retrieve the data using an ajax call and put them into a list and then display it as a tree.But I think dynamically creating nodes depending on the data is more efficient.

   function createNodeList(){
        $('#menuCPanel #contentData #tree').jstree({            
            "json_data" : {
                /*"data" : [{
                    "data" : {title : "menuName"},
                    "attr" : {id : "menuId"},
                    "state" : "closed"
                    }
                   ],*/
                 "ajax" :{
                    "type" : "POST",
                    "url" : "?m=admin?action=getNodeList",
                    "dataType" : "json",
                    "data" : function(result){
                        return {                            
                            id : result.attr ? result.attr("id") : result['menuId'],
                            title : result.attr ? result.attr("title") : result['menuName']
                        };
                    },  

                },
            },
            "callback" : {

            },

            "themes" : {
                "theme" : "classic",
                "dots" : true,
                "icons" : true
            },
            "plugins" : ["json_data", "themes"]

        }).bind("select_node.jstree", function (e, data) { alert(jQuery.data(data.rslt.obj[0], "jstree").id) });

    }


    }

this is the stucture of my json data

"data":[{"menuId":"1","menuName":"Top Menu"},{"menuId":"2","menuName":"Main Menu"},{"menuId":"3","menuName":"Bottom Menu"},{"menuId":"4","menuName":"Main Menu"}]}

I would like to know what is wrong with the above result and how to dynamically create a node within in the ajax.success();
I went through some examples but all of them use the jstree.cretate() which i can’t invoke inside jstree.json_data.ajax.success()
thanks in advance 🙂

Answer 1

This is a standard jstree with json data, which also binds select_node to do actions when a node is selected. Nodes must not have an ID which are plain numbers or contain jquery special selector characters. Number IDs must have a standard character first. so 1 should be N1, 2 should be N2 for example.

$('#MyTreeDiv').jstree({
        "json_data": {
            "ajax": {
                "type": "POST",
                "url": "/MyServerPage.aspx?Action=GetNodes",
                "data": function (n) { return { id: n.attr ? n.attr("id") : 0} },
            }
        },
        "themes": {
            "theme": "default",
            "url": "/Content/Styles/JSTree.css",
            "dots": false
        },
        "plugins": ["themes", "json_data", "ui", "crrm"]
    }).bind("select_node.jstree", function (e, data) {
        var selectedObj = data.rslt.obj;
        alert(selectedObj.attr("id"));
});

The json returned from your server must be in the correct format as defined in the jstree documentation, and must no include several special characters, unless those characters are escaped or the json created using serialization.