Question

我有一些代码，我需要能够将子节点添加到自己包含子节点的jstree。下面的代码正确地将'child2'节点添加到'child1'但忽略了child3数据。任何帮助非常感谢。代码如下：

<html>
<head>
<script type="text/javascript" src="http://static.jstree.com/v.1.0rc2/jquery.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0rc2/jquery.jstree.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $(function () {
        $("#tree").jstree({ 
            "json_data" : {
                "data" : [
                    { 
                        "data" : "parent", 
                        "attr" : { "id" : "root.id" }, 
                        "children" : [ { "data" : "child1",
                                         "attr" : { "id" : "child1.id" },
                                         "children" : [ ] }
                                     ]
                    },
                ]
            },
            "plugins" : [ "themes", "json_data", "crrm" ]
        });
    });
    $("#add").click(function() {
        $("#tree").jstree("create", $("#child1\\.id"), "inside",
                { "data" : "child2", "attr" : { "id" : "child2.id" },
                  "children" : [ { "data" : "child3", "attr" : { "id" : "child3.id" }, "children": [ ] } ] },
                          function() { alert("added"); }, true);
    });
});
</script>
</head>

<body>

<div id="tree" name="tree"></div>

<input type="button" id="add" value="add" />
</body>
</html>

Answer 1

首先，这个json与最后一个括号内的最后一个逗号无效。把它关掉：

[
   {
        "data" : "parent",
        "attr" : {
            "id" : "root.id"
        },
        "children" : [
            {
                "data" : "child1",
                "attr" : {
                    "id" : "child1.id"
                },
                "children" : [ ]
            }
        ]
    }
]

此外，从版本3.0开始，或者您可以简单地只使用json插入新节点。不再需要递归。

我像这样创建了json，它创建了一个名为income的文件夹，并在其下放置了许多文本子项，但这些文件夹也可以像具有更多内容的父项一样。请参阅下面的函数，该函数将此文件夹与所有孩子一起插入父文件夹：

{
    "text" : "Income",
        "id" : "_folder_income",
        "state" : {
            "opened" : true 
        },
        "children" : [
        {
            "text" : "$125,000 - $150,000",
            "state" : {
                "selected" : true 
            },
            "icon" : "jstree-file",
            "id" : "6017897162332"
        },
        {
            "text" : "$150,000 - $250,000",
            "state" : {
                "selected" : false 
            },
            "icon" : "jstree-file",
            "id" : "6017897374132"
        },
        {
            "text" : "$250,000 - $350,000",
            "state" : {
                "selected" : false 
            },
            "icon" : "jstree-file",
            "id" : "6017897397132"
        },
        {
            "text" : "$350,000 - $500,000",
            "state" : {
                "selected" : false 
            },
            "icon" : "jstree-file",
            "id" : "6017897416732"
        },
        {
            "text" : "Over $500,000",
            "state" : {
                "selected" : false 
            },
            "icon" : "jstree-file",
            "id" : "6017897439932"
        },
        {
            "text" : "$30,000 - $40,000",
            "state" : {
                "selected" : false 
            },
            "icon" : "jstree-file",
            "id" : "6018510070532"
        },
        {
            "text" : "$100,000 - $125,000",
            "state" : {
                "selected" : false 
            },
            "icon" : "jstree-file",
            "id" : "6018510083132"
        },
        {
            "text" : "$40,000 - $50,000",
            "state" : {
                "selected" : false 
            },
            "icon" : "jstree-file",
            "id" : "6018510087532"
        },
        {
            "text" : "$75,000 - $100,000",
            "state" : {
                "selected" : false 
            },
            "icon" : "jstree-file",
            "id" : "6018510100332"
        },
        {
            "text" : "$50,000 - $75,000",
            "state" : {
                "selected" : false 
            },
            "icon" : "jstree-file",
            "id" : "6018510122932"
        }
    ]
}

这个json也可用于填充树实例上的父文件夹：

/**
 * inserts a new node (json object returned from url) into an existing node (parentNodeId), for the div ud in jsTreeName which is
 * an instanced jstree.
 * @param string jsTreeName  {name of an instanced tree}
 * @param string url  {returns json}
 * @param string parentNodeId {string of the parent node id}
 */
function insertUrlIntoNode(jsTreeName, url, parentNodeId) {
  var nodeTree = getSynchronousJson(url);
  var tree = $('#'+jsTreeName).jstree(true);
  tree.deselect_all();
  var sel = tree.create_node(parentNodeId, nodeTree);
  //tree.deselect_all();
  //tree.select_node(sel);  //optionally you could select the new node after insersion
}

Answer 2

据我所知，“创建”功能不支持一次创建多级树。被调用的方法不使用并检查传递数据的children属性。

Answer 3

你需要自己做，类似的事情：

                var recursivelyCreate = function (node, parentNodeId) {
                    tree.jstree("create", $("#"+parentNodeId), "inside",  node, function() {}, true);
                    if(node.children){
                        $.each(node.children, function(i, child){
                            recursivelyCreate(child, node.attr.id);
                        });
                    }
                };
                recursivelyCreate(rootNodeYouWantToInsert,nodeParentId);

jstree - 添加自己包含子节点的子节点

3 个答案: