当使用create_node添加节点时,jsTree只显示最后一个根节点

jsTree shows only the last root node when nodes are added using create_node

本文关键字:jsTree 显示 根节点 最后一个 节点 create 添加 node      更新时间:2023-09-26

我已经创建了一个jtree

$('.containerTree').jstree({
    "core": {
        "check_callback": true,
        "data": ["Root"]
    }
});
添加脚本:

<link rel="stylesheet" href="~/Content/bootstrap.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.0.1/themes/default/style.min.css" />
<script src="~/Scripts/jquery-3.1.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.0.9/jstree.min.js"></script>

所以,我想创建并显示一个包含子节点的根节点列表。为此,我在循环中使用"create_node"函数:

for (var iteration = 0; iteration < 10; iteration++) {
       var newNodes= $(".containerTree").jstree("create_node",null,"root"+iteration, "last", function (node) {
            for (var i = 0; i < 10; i++) {
                            var newDataChild = {
                                "text": "child" + i,
                                "id": "child" + i
                            };
                            tree.create_node(node, newDataChild, "last", function (newChild) {
                            });
            }         
});

我期望看到这样的结果:

Root1
  ----child1
 ...
RootN
  ----child1
  ..........

结果创建节点,但只显示最后一个根节点。谁能解释为什么会这样?

您需要解决两个问题:

  1. tree.create_node(... - tree变量没有定义
  2. .create_node -最好使用与第一次相同的方法

正确的代码如下所示。检查demo - demo Fiddle

var $tree = $(".containerTree");
for (var iteration = 0; iteration < 10; iteration++) {
    $tree.jstree("create_node",null,"root"+iteration, "last", function (node) {
        for (var i = 0; i < 10; i++) {
          var newDataChild = {
            "text": "child" + i,
            "id": "child" + i
          };
         $tree.jstree("create_node", node, newDataChild, "last");
        }         
    });
}