在JSON生成的JsTree中打开以前选择的子节点

Question

我有一个页面，用户可以在其中创建一个文档，其中一个输入是JsTree输入，点击打开一个模态，每次都会通过JSON数据生成新的JsTree。在用户选择了一些选项后，他们会提交该选项，并且所选节点的文本会显示在输入中，所选节点本身也会保存在另一个隐藏输入中。

问题是，每当用户想要更改所选节点时，他们都需要手动再次打开所有子节点。在用户选择并再次打开JsTree之后，我只成功地打开了之前选择的一级节点。

问题还在于，JsTree在父节点打开后生成子节点需要一些时间。所以当我的代码打开节点"时；2〃；，它想打开"；2.2〃；，但目前它还不存在。我尝试在打开每个节点之间手动设置setTimeout，但没有帮助。

我的问题是，如何在刚刚生成的JSON JsTree 中打开和选择以前选择的子节点(例如3.1.1.1(

$("#container-test").on("ready.jstree", function() {
if(selectedNodes && selectedNodes.length > 0) {
selectedNodes.forEach(async function(node) {
if(node.parents.length >= 2) {
var allParents = node.parents.reverse()
for(i = 1; i < allParents.length; i++) {
nodesOpener(allParents[i])
}
}
})
}
})
function nodesOpener(parent) {
$("#container-test").jstree("open_node", $("#" + parent))
setTimeout(function() {
}, 1000)
}

Answer 1

open_node方法在节点打开后接受回调进行调用。如果这不适用于您的数据获取机制，也许您应该使用另一个事件。

这里有一个例子：

// after_open
var elem = $('#jstree_demo')
elem.jstree({
'core': {
'data': [{
"id": "ajson1",
"parent": "#",
"text": "Simple root node"
},
{
"id": "ajson2",
"parent": "#",
"text": "Root node 2"
},
{
"id": "ajson3",
"parent": "ajson2",
"text": "Child 1"
},
{
"id": "ajson4",
"parent": "ajson2",
"text": "Child 2"
},
{
"id": "ajson5",
"parent": "ajson4",
"text": "Child 2.2"
},
]
}
});

function open(id_list) {
while (id_list.length) {
var id = id_list.shift();
elem.jstree('open_node', id, function() {
open(id_list);
});
}
}
elem.on("ready.jstree", function() {
open(['ajson2', 'ajson4']);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js" integrity="sha512-TGClBy3S4qrWJtzel4qMtXsmM0Y9cap6QwRm3zo1MpVjvIURa90YYz5weeh6nvDGKZf/x3hrl1zzHW/uygftKg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" integrity="sha512-pg7xGkuHzhrV2jAMJvQsTV30au1VGlnxVN4sgmG8Yv0dxGR71B21QeHGLMvYod4AaygAzz87swLEZURw7VND2A==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<div id="jstree_demo"></div>