6

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

3 回答 3

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
}
于 2015-02-26T04:12:10.290 回答
0

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

于 2011-09-12T09:46:20.763 回答
0

你需要自己做，像这样：

                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);
于 2013-07-11T12:46:14.903 回答