Javascript 如何判断 jsTree 是否已完全加载？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11452205/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I tell if jsTree has fully loaded?
提问by PlTaylor
I am trying to write a function that opens specific nodes on a jsTree but I am having a problem where the function is executed before my base tree is loaded from the ajax call. How can I tell if my jstree data has been loaded and wait until it is done loading. Below is the function I am trying to use.
我正在尝试编写一个函数来打开 jsTree 上的特定节点，但是我遇到了一个问题，即在从 ajax 调用加载我的基本树之前执行该函数。如何判断我的 jstree 数据是否已加载并等待加载完成。下面是我正在尝试使用的功能。
function openNodes(tree, nodes) {
for (i in nodes) {
$('#navigation').jstree("open_node", $(nodes[i]));
}
}
I am loading my initial tree with the following command
我正在使用以下命令加载我的初始树
$("#navigation").jstree({
"json_data": {
"ajax": {
"url": function(node) {
var url;
if (node == -1) {
url = "@Url.Action("BaseTreeItems", "Part")";
} else {
url = node.attr('ajax');
}
return url;
},
"dataType": "text json",
"contentType": "application/json charset=utf-8",
"data": function(n) { return { id: n.attr ? n.attr("id") : 0, ajax: n.attr ? n.attr("ajax") : 0 }; },
"success": function() {
}
}
},
"themes": { "theme": "classic" },
"plugins": ["themes", "json_data", "ui"]
});
采纳答案by oracleoptimizer
I used setInterval and clearInterval:
我使用了 setInterval 和 clearInterval：
var interval_id = setInterval(function(){
// $("li#"+id).length will be zero until the node is loaded
if($("li#"+id).length != 0){
// "exit" the interval loop with clearInterval command
clearInterval(interval_id)
// since the node is loaded, now we can open it without an error
$("#tree").jstree("open_node", $("li#"+id))
}
}, 5);
JStree's ".loaded" callback only works for root nodes; "._is_loaded" may work instead of checking the node's length, but I haven't tried it. Either way, the animation settings cause nodes that are deeper in the tree to be loaded a few milliseconds later. The setInterval command creates a timed loop that exits when your desired node(s) is loaded.
JStree 的“.loaded”回调只对根节点有效；“._is_loaded”可能会起作用，而不是检查节点的长度，但我还没有尝试过。无论哪种方式，动画设置都会导致树中更深的节点在几毫秒后加载。setInterval 命令创建一个定时循环，在加载所需节点时退出。
回答by craftsman
Before you call .jstree() on an element, you can bind your callbacks to before.jstreeand loaded.jstreeevents:
之前一个元素上调用.jstree（），您可以将回调绑定before.jstree和loaded.jstree事件：
$(selector)
.bind('before.jstree', function(e, data) {
// invoked before jstree starts loading
})
.bind('loaded.jstree', function(e, data) {
// invoked after jstree has loaded
$(this).jstree("open_node", $(nodes[i]));
})
.jstree( ... )
回答by LennonR
In the more recent versions of jstree, you may need to wait until all the nodes have finished loading before interacting with them. To do this you need:
在较新版本的 jstree 中，您可能需要等到所有节点都完成加载后才能与它们进行交互。为此，您需要：
ready.jstree
So:
所以：
$(selector)
.bind('ready.jstree', function(e, data) {
// invoked after jstree has loaded
})
...
回答by koji Izawa
You had better call $.ajax() function to get data you want at first, you can call $().jstree() function in the success: field like bellow my code.
你最好先调用 $.ajax() 函数来获取你想要的数据，你可以在 success: 字段中调用 $().jstree() 函数，就像我的代码一样。
var fullTree;
$.ajax({
url :"./php/select_tree.php",
data : fullTree,
method : "GET",
dataType : "json",
success : function(fullTree){
$("#jstree").jstree({
"core" : {
"data" :fullTree,
"check_callback" : true
},
"plugins" : [ "contextmenu", "dnd", "changed", "wholerow" ]
});
}
})
;
回答by Ben
I use refresh.jstreeevent in my case (I need to dynamically change and refresh the nodes in jstree very often).
我refresh.jstree在我的情况下使用事件（我需要经常动态更改和刷新 jstree 中的节点）。
According to the docoment, it
根据文档，它
triggered when a refresh call completes
刷新调用完成时触发
Sample code:
示例代码：
$.post(
[url],
...
).done(function(){
$jstree.jstree().settings.core.data = result;
$jstree.jstree().refresh();
});
$(selector).on('refresh.jstree', function(){
// do something
});
$.post(
[url],
...
).done(function(){
$jstree.jstree().settings.core.data = result;
$jstree.jstree().refresh();
});
$(selector).on('refresh.jstree', function(){
// do something
});
回答by fhl
[Disclaimer: this does not apply to the OP since the state plugin is not listed in the setup code.]
[免责声明：这不适用于 OP，因为状态插件未在设置代码中列出。]
If you are using the state plugin, use the state_ready.jstree event instead of the ready.jstree or loaded.jstree events.
如果您使用 state 插件，请使用 state_ready.jstree 事件而不是 ready.jstree 或 loaded.jstree 事件。
$(selector).on('state_ready.jstree', function () {
// open desired node
})
回答by jnoreiga
You don't have to add an interval. The plugin sets a class on the node that it's loading via ajax.
您不必添加间隔。该插件在它通过 ajax 加载的节点上设置一个类。
.one("reselect.jstree", function (evt, data) {
if ($("#MYTREEID").find(".jstree-loading").length == 0) {
alert('my ajax tree is done loading");
}
})
