jstree - 添加本身包含子节点的子节点答案

【问题标题】：jstree - adding child nodes which themselves contain childrenjstree - 添加本身包含子节点的子节点
【发布时间】：2015-02-28 06:48:52
【问题描述】：

我有一些代码需要能够将子节点添加到本身包含子节点的 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>

【问题讨论】：

也许这不可能？我推测 create 函数是为了递归子级而实现的，但也许不是……去看看源代码……
我遇到了同样的问题，你怎么解决的？

标签： javascript jquery jstree

【解决方案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
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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);

【讨论】：