Question

我已经在我的项目中实施了 JSTREE 一切正常但最近我遇到了这个问题，即使我设法修复它的概念，我仍然不清楚。

这是我的意思吗？

JSTREE 代码写在jquery 文档就绪函数中喜欢这个

$(document).ready(function() { 
  $("#someid").jstree( { 

    "json_data" : {
      "data" : [{
        "attr" : { "id" : "root" },
        "data" : {
          "title" : "Root",
          "attr" : { "id" : "root","href" : "#" ,"class" : "jstree-clicked" }
        },
        "children" : [
              {
              "attr" : {"id" : "node-1"},
              "data" : {
                "title" : "Node-1",
                "attr" : {"id" : "node-1" ,"href": "#" }
              },
              "children": [

              ],
              "state" : "closed"
            },

              {
              "attr" : {"id" : "node-2"},
              "data" : {
                "title" : "Node-2",
                "attr" : {"id" : "node-2" ,"href": "#" }
              },
              "children": [

              ],
              "state" : "closed"
            },

              {
              "attr" : {"id" : "node-3"},
              "data" : {
                "title" : "Node-3",
                "attr" : {"id" : "node-3" ,"href": "#" }
              },
              "children": [

              ],
              "state" : "closed"
            },

              {
              "attr" : {"id" : "node-4"},
              "data" : {
                "title" : "Node-4",
                "attr" : {"id" : "node-4" ,"href": "#" }
              },
              "children": [

              ],
              "state" : "closed"
            },

              {
              "attr" : {"id" : "node-5"},
              "data" : {
                "title" : "Node-5",
                "attr" : {"id" : "node-5" ,"href": "#" }
              },
              "children": [

              ],
              "state" : "closed"
            }
     ],
     // the method where the ajax request will be sent to get thejson data to build the tree
    "ajax" : {
      "url" : "/my_url/tree",
      "data" : function (focus_element) {
        return { node : focus_element.attr ? focus_element.attr("id") : 0 };
      }
    }
  },

  "themes" : {
    "theme" : "classic",
    "dots" : true,
    "icons" : true
  },
  "plugins" : ["themes",  "json_data" ,"ui"]

})

页面上有一个另一个jquery文档就绪功能，它将点击创建的锚节点但上面的jstree 。

$（document）.ready（function（）{
 $("a#node-1").click()     
}）

现在当页面加载时，问题就出现了构建了树，但未点击 node-1 锚链接。

调试它我发现 console.log总是给我和空数组表示＃node-1，这很奇怪。

我将警告框放在第二个document.ready function 中，以查看在我请求节点时是否构建了树。像这样

$（document）.ready（function（）{
alert("JSTREE SHOULD BE CREATED BY NOW");

$("a#node-1").click()  
}）

但令我惊讶的是，当突然出现警告时，JSTREE仍在构建树。

通过对javascript的一些理解，我知道页面上的脚本标签本质上是同步的，即页面上的第二个脚本仅在第一次执行时执行

这让我相信是JSTREE异步运行。如果是，可以请任何人分享一些亮点。

顺便说一句，我设法使用 jstree加载处理程序

来实现相同的目标

$（ “＃someid”）。结合（ “loaded.jstree”，
   function() {   
       $("a#node-1").click();   
       })

Answer 1

你的问题有一个有趣的答案：我刚刚发现jquery.jstree.js（jsTree 1.0-rc3）中的代码使用setTimer（...）来调用.init（）在节点上，即是异步的。我还在其他项目中使用了jsTree 1.0-rc1，它是同步的。

我担心您不会发现此文档，因为它是一个实现细节：它取决于您使用的版本。

正如其他人所建议的那样，使用jstree中的事件机制来实现你想要的。另一方面，Jurgen对DOM的结构是正确的。

（*）我通过Github浏览了原始代码，看来这个变化发生在2011年。在此之前你有：

jsTree 1.0-rc1 https://github.com/vakata/jstree/blob/0b8ebb2ba468b4c81e3c7645a9335584ddab41f5/jquery.jstree.js

line 59: instances[instance_id]._init();

而现在，

jStree 1.0-rc3 https://github.com/vakata/jstree/blob/v.pre1.0/jquery.jstree.js

line 162: setTimeout(function() { instances[instance_id].init(); }, 0);

Answer 2

通过阅读JSTree文档，我发现了一个有趣的注释：在第一个代码部分的页面http://www.jstree.com/documentation/json_data上注明

// `state` and `children` are only used for NON-leaf nodes

但是您尝试将它们用作具有子节点的节点。也许这会导致你的问题。

Answer 3

编辑。刚检查了文档，我的第一个猜测是正确的，删除了其余部分。

该ID将应用于包含<li>的{{1}}。做

<a>

代替。您的CSS选择器是错误的，永远不会匹配，这与异步树行为无关。

编辑：

现在，如果您的树是同步的，您需要等待其加载的事件，您可以使用以下命令执行此操作之前的代码初始化树，或者由于时间竞争条件，您可能会丢失加载的事件：

$("li#node-1 > a").click()

如果您只是想在加载时打开节点，而不是做任何复杂的事情否则，您可以使用initial_open init参数来设置初始打开的节点没有摆弄任何事件。

JSTREE脚本异步执行

3 个答案: