Question

我必须从数据库中检索菜单项列表并将其显示在树结构中我想使用菜单名称作为节点名称和菜单ID作为节点的id。我使用的方法是使用ajax调用检索数据并将它们放入列表然后将其显示为树。但我认为根据数据动态创建节点更有效。

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

    }


    }

这是我的json数据的结构

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

我想知道上述结果有什么问题以及如何在ajax.success（）中动态创建节点;
我经历了一些例子但是所有这些都使用了jstree.cretate（），我无法在jstree.json_data.ajax.success（）中调用它提前谢谢：）

Answer 1

这是一个带有json数据的标准jstree，它还绑定select_node以在选择节点时执行操作。节点的ID不能是普通数字，也不能包含jquery特殊选择器字符。号码ID必须首先具有标准字符。所以1应该是N1,2例如应该是N2。

$('#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"));
});

从服务器返回的json必须采用jstree文档中定义的正确格式，并且不得包含多个特殊字符，除非转义这些字符或使用序列化创建json。

在jstree树结构中动态创建节点

1 个答案: