如何在动态生成的JSON格式JsTree中自动展开并选中历史选中的子节点

我太懂你这个痛点了——手动加固定setTimeout确实不靠谱，jstree加载子节点的异步时间根本没法预判，延迟设短了节点还没加载，设长了又浪费用户时间。咱们换个思路，用jstree自身的回调机制来解决，保证每个父节点完全展开、子节点加载完成后，再处理下一个节点。

核心思路 #

jstree的open_node方法支持传入回调函数，这个回调会在节点真正展开且子节点加载完成后触发。我们可以通过递归遍历目标节点的父链，每展开一个父节点就等回调触发，再继续展开下一个，最后再选中目标节点。

修改后的代码示例 #

$("#container-test").on("ready.jstree", function() {
    if(selectedNodes && selectedNodes.length > 0) {
        // 遍历每个历史选中的节点
        selectedNodes.forEach(function(targetNode) {
            // 整理父节点链：去掉根节点标识"#"，反转顺序从最上层父节点开始展开
            const parentIds = targetNode.parents
                .filter(id => id !== "#")
                .reverse();
            
            // 递归展开所有父节点，完成后选中目标节点
            expandParentChain(parentIds, 0, function() {
                $("#container-test").jstree("select_node", "#" + targetNode.id);
            });
        });
    }
});

// 递归展开父节点链的工具函数
function expandParentChain(parentIds, currentIndex, onComplete) {
    // 所有父节点展开完成，执行后续操作
    if(currentIndex >= parentIds.length) {
        onComplete();
        return;
    }

    const currentParentId = parentIds[currentIndex];
    const parentNode = $("#" + currentParentId);

    // 调用jstree的open_node，利用回调确保节点完全展开
    $("#container-test").jstree("open_node", parentNode, function() {
        // 继续展开下一个父节点
        expandParentChain(parentIds, currentIndex + 1, onComplete);
    });
}

为什么这个方案有效？ #

1. 完全适配jstree的异步逻辑：不再依赖固定延迟，而是等jstree自己确认节点展开完成，从根源上解决了子节点未加载就尝试操作的问题。
2. 递归遍历父链：从最上层的父节点开始逐层展开，保证目标节点的整个路径都被正确打开。
3. 最后选中目标节点：等所有父节点都展开后再选中，避免因为节点未加载导致选中失败。

额外提示 #

• 确保selectedNodes里的每个节点对象都包含正确的id和parents属性（这是jstree节点的标准属性，正常情况下都有）。
• 就算你的jstree是通过AJAX加载子节点的，这个方案也适用——open_node的回调会等AJAX请求完成、子节点渲染好后才触发。

内容的提问来源于stack exchange，提问作者Nkwitchoua