jQuery JsTree 打开一个节点然后选择一个子节点（使用json_result）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7307004/
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
JsTree Open a node then select a child node (using json_result)
提问by Joe
I am having trouble with a JsTree I am using in an MVC2 project. I would like to create a function to deselect/close all nodes on the tree. Then open a specific node, and select a specific child node (I have the Id values for both).
我在 MVC2 项目中使用的 JsTree 有问题。我想创建一个函数来取消选择/关闭树上的所有节点。然后打开一个特定的节点，并选择一个特定的子节点（我有两个的 Id 值）。
The trouble is that the select_node is always called before the open_node finishes, so the node is not selected, as the tree has not loaded the data yet, and the node ID does not exist.
问题是 select_node 总是在 open_node 完成之前调用，所以没有选择节点，因为树还没有加载数据，节点 ID 不存在。
I first tried this function.
我第一次尝试了这个功能。
$('#demo3').jstree('deselect_all');
$('#demo3').jstree('close_all');
$('#demo3').jstree("open_node", $('#ParentId'), false, true);
$('#demo3').jstree("select_node", $('#ChildId'));
I then tried moving the code to the select_node and move_node binds of the tree, but no luck. At the moment I'm stuck using a setTimeout(), which is a horrible solution.
然后我尝试将代码移动到树的 select_node 和 move_node 绑定，但没有运气。目前我被困在使用 setTimeout()，这是一个可怕的解决方案。
Does anyone know how I can tell the tree to only select the node after opening has finished?
有谁知道我如何告诉树在打开完成后只选择节点？
回答by Nikos Steiakakis
You could try passing a function that selects the node as a callback like:
您可以尝试传递一个选择节点作为回调的函数，例如：
$('#demo3').jstree('open_node', '#ParentID', function(e, data) {
$('#demo3').jstree('select_node', '#ChildId');
}, true);
This way select_nodewill be called once the open_node returns success.
select_node一旦 open_node 返回成功，就会调用这种方式。
回答by Ashraf Sayied-Ahmad
I am currently using it in a MVC4 project.
我目前在 MVC4 项目中使用它。
if you configure the open_node function to load the node JSON (in the "core" plugin you set load_open to true), then the new added node is exists in the server side but its DOM element is still not because the open_node function does not finish it job. Therefore, you need to wait or use a second parameter (success callback). In the callback the new node rendered in the DOM tree and its selector valid.
如果您配置 open_node 函数来加载节点 JSON（在“核心”插件中将 load_open 设置为 true），则新添加的节点存在于服务器端但其 DOM 元素仍然不存在，因为 open_node 函数未完成它的工作。因此，您需要等待或使用第二个参数（成功回调）。在回调中，DOM 树中呈现的新节点及其选择器有效。
jsTree configuration sample:
jsTree 配置示例：
"core": {
"open_parents": true,
"load_open": true
}
My working code:
我的工作代码：
$("iframe#UploadTarget").load(function () {
var result = jQuery.parseJSON($(this).contents().text());
if (result.Result == true) {
$("#uploadDialog").dialog("close");
var tree = jQuery.jstree._focused();
/*
open_node will open the parent, get the childs from the server
(controller) and renders the new item before the callback executed,
so the jQuery selector will be valid
*/
tree.open_node(result.ParentId,/*CALLBACK*/ function () {
var newNode = $("#" + result.Id);
tree.select_node(newNode, false, null);
});
} else {
alert(result.Result + ":" + result.ResultDescription);
}
});//GOOD LUCK :-)
回答by tomhre
hope this might help and sorry I am not using json. I am using jstree together with function to open nodes by clicking on elements outside from the html of jstree.
希望这可能会有所帮助，抱歉我没有使用 json。我将 jstree 与函数一起使用，通过单击 jstree 的 html 之外的元素来打开节点。
each node in our setup is like a webpage, so on the homepage of the dashboard we have list of recently edited pages.
我们设置中的每个节点就像一个网页，因此在仪表板的主页上，我们有最近编辑过的页面列表。
each of those links has this javascript to execute
每个链接都有这个 javascript 来执行
<a href="javascript: selectLeftNavNode(339);">Edit</a>
where 339 is the id of the page we want to edit
其中 339 是我们要编辑的页面的 id
and this is fhe function that used to be executed
这是曾经被执行的函数
function selectLeftNavNode(node) {
$('#demo').jstree('deselect_all');
$('#demo').jstree('select_node', '#node_' + node);
}
the problem we noticed recently that if the page recently edited is deep within the tree more specifically in the section that has not been loaded yet it will fail
我们最近注意到的问题是，如果最近编辑的页面位于树的深处，更具体地说是在尚未加载的部分中，它将失败
this is why I decided to make ajax request to the server in order to retrieve all parent id's
这就是为什么我决定向服务器发出ajax请求以检索所有父ID的原因
changed code below, the ajax in my case will return something like this looking xml
更改下面的代码，在我的情况下，ajax 将返回类似这样的 xml
<?xml version="1.0" encoding="UTF-8"?>
<response>
<paths>
<path>339</path>
<path>338</path>
<path>38</path>
</paths>
</response>
and the function
和功能
function selectLeftNavNode(node) {
$('#demo').jstree('deselect_all');
if($('#demo').jstree('select_node', '#node_' + node) === false)
{
// if it is false means that the node is not yet rendered
// so instead of loading we will require to get list of parent nodes to open in order, then it will become available
// an ajax call should get us all the nodes
$.ajax({
type: "POST",
dataType: "xml",
url: your_url_to_php_script',
data: {node_id:node},
success: function(data)
{
var remaining_nodes = new Array();
var paths_count = $(data).find('response').find('path').length;
for(var x=1;x<=paths_count;x++){
remaining_nodes[x-1] = $(data).find('response').find('paths path:nth-child('+x+')').text();
}
open_nodes_step_by_step(remaining_nodes);
}
});
}
}
and in addition to that a function that is looped through on callbacks from open_node, the function opens node by node and when it hits the last entry that should be the actual node id we want to select it will use select_node instead
除了在 open_node 的回调上循环的函数之外，该函数逐个节点打开，当它到达最后一个条目时，该条目应该是我们想要选择的实际节点 ID，它将使用 select_node
function open_nodes_step_by_step(remaining_nodes)
{
var nodes = remaining_nodes.slice();
tree = jQuery.jstree._focused();
if(nodes.length > 1){
var nodes_left = remaining_nodes.slice();
nodes_left.pop();
var to_open = nodes.length - 1;
tree.open_node(document.getElementById('node_' + nodes[to_open]), /*CALLBACK*/ function () {
open_nodes_step_by_step(nodes_left);
});
}
else{
tree.select_node('#node_' + nodes[0]);
}
}
i have tested my solution with IE8, FF and Chrome all seems to be working just fine, on top of that i use jQuery v1.10.1 and jsTree 1.0-rc1 (unfortunately as the code has been there for years now and it has all that database and other integrations i decided not to change to newer versions, it works)
我已经用 IE8、FF 和 Chrome 测试了我的解决方案似乎都工作得很好，最重要的是我使用了 jQuery v1.10.1 和 jsTree 1.0-rc1（不幸的是，因为代码已经存在多年了，它拥有所有这些数据库和其他集成我决定不更改为更新版本，它有效）
hope I have helped someone
希望我帮助过某人
Tom
汤姆
