我正在尝试编写一个在jsTree上打开特定节点的函数,但我遇到的问题是在从ajax调用加载基础树之前执行该函数。如何判断我的jstree数据是否已加载并等待加载完毕。以下是我尝试使用的功能。
function openNodes(tree, nodes) {
for (i in nodes) {
$('#navigation').jstree("open_node", $(nodes[i]));
}
}
我正在使用以下命令加载我的初始树
$("#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"]
});
答案 0 :(得分:33)
在元素上调用.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( ... )
答案 1 :(得分:14)
在更新版本的jstree中,您可能需要等到所有节点都完成加载后再与它们进行交互。要做到这一点,你需要:
ready.jstree
所以:
$(selector)
.bind('ready.jstree', function(e, data) {
// invoked after jstree has loaded
})
...
答案 2 :(得分:6)
我使用了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的“.loaded”回调仅适用于根节点; “._is_loaded”可以工作而不是检查节点的长度,但我还没有尝试过。无论哪种方式,动画设置都会导致树中较深的节点在几毫秒之后加载。 setInterval命令创建一个定时循环,在加载所需节点时退出。
答案 3 :(得分:3)
你最好先调用$ .ajax()函数来获取你想要的数据,你可以在成功:字段中调用$()。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" ]
});
}
})
;
答案 4 :(得分:1)
您不必添加间隔。该插件在通过ajax加载的节点上设置一个类。
.one("reselect.jstree", function (evt, data) {
if ($("#MYTREEID").find(".jstree-loading").length == 0) {
alert('my ajax tree is done loading");
}
})
答案 5 :(得分:1)
[免责声明:这不适用于OP,因为状态插件未在设置代码中列出。]
如果您正在使用状态插件,请使用state_ready.jstree事件而不是ready.jstree或loaded.jstree事件。
$(selector).on('state_ready.jstree', function () {
// open desired node
}
答案 6 :(得分:0)
我使用refresh.jstree
事件(我需要经常动态更改和刷新jstree中的节点)。
根据实际情况
刷新呼叫完成时触发
示例代码:
$.post(
[url],
...
).done(function(){
$jstree.jstree().settings.core.data = result;
$jstree.jstree().refresh();
});
$(selector).on('refresh.jstree', function(){
// do something
});
答案 7 :(得分:0)
由于我没有找到解决方案,这适用于当前版本的 JSTree (3.3.7),我将在这里发布我的工作方法。
首先我绑定 select_node 并告诉 jstree 打开父节点,每当我选择 i 节点时。
var strIdentifierJsTree = "#your-whatever-id-to-jstree";
var strNode2Select = "#your-whatever-id-to-your-node-which-parents-has-to-be-showed";
$( strIdentifierJsTree ).on("select_node.jstree", function (e, data) {
$(strIdentifierJsTree).jstree(true).open_node( data.node.parent );
});
然后我绑定到加载函数:
$( strIdentifierJsTree ).bind('loaded.jstree', function(e, data) {
$(strIdentifierJsTree).jstree(true).select_node( strNode2Select );
});
现在它将在 JSTree 初始化后(完全加载时)选择我的节点,并打开所有父节点,无论嵌套深度如何。其他答案中提到的单一开放节点方法对我不起作用。