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

发布于 2024-11-19 22:52:58 字数 1750 浏览 4 评论 0原文

我必须从数据库中检索菜单项列表并将其显示在树结构中
我想使用菜单名称作为节点名称，使用菜单 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() 内调用它
提前致谢：）

原文

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 :)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

余厌 2024-11-26 22:52:59

这是一个带有 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。

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.

回复收藏 0 原文

~没有更多了~