如何在页面刷新后设置jsTree的选中节点？

要实现页面加载后根据URL中的分类ID自动选中节点，你可以按以下步骤修改代码：

1. 从URL中提取分类ID #

先从当前页面URL里解析出需要选中的分类ID，用字符串分割的方式即可实现：

// 从URL路径末尾提取分类ID
function getCategoryIdFromUrl() {
    const path = window.location.pathname;
    const parts = path.split('/');
    return parts[parts.length - 1];
}
const targetCategoryId = getCategoryIdFromUrl();

2. 监听jsTree加载完成事件，执行选中操作 #

在jsTree初始化后，监听ready.jstree事件，确保树结构完全加载后，再选中目标节点并展开到对应层级：

修改后的完整脚本：

$(document).ready(function () {
    // 提取URL中的分类ID
    function getCategoryIdFromUrl() {
        const path = window.location.pathname;
        const parts = path.split('/');
        return parts[parts.length - 1];
    }
    const targetCategoryId = getCategoryIdFromUrl();

    const jstree = $('#jstree').jstree({
        'core' : {
            'data' : {
                'url' : '/admin/catalog/categories',
                'data' : function (node) {
                    return { 'id' : node.id };
                }
            }
        }
    });

    // 树加载完成后选中目标节点
    jstree.on('ready.jstree', function () {
        if (targetCategoryId) {
            // 选中对应ID的节点
            $('#jstree').jstree('select_node', targetCategoryId);
            // 自动展开到该节点层级（可选，提升用户体验）
            $('#jstree').jstree('open_node', targetCategoryId, function() {
                // 可选：滚动到选中节点位置，适配深层级分类
                const selectedNode = $('#jstree').jstree('get_node', targetCategoryId);
                $(selectedNode.a).get(0).scrollIntoView({ behavior: 'smooth' });
            });
        }
    });

    jstree.on('changed.jstree', function (e, data) {
        window.open('/admin/catalog/categories/'+data.node.id, '_self');
    });
})

关键说明 #

• ready.jstree事件：保证jsTree的DOM结构和数据完全加载后再执行选中操作，避免因节点未渲染导致选中失败。
• select_node方法：直接传入目标分类ID即可选中对应节点。
• open_node方法：自动展开到目标节点所在层级，让用户直观看到当前选中的分类位置。
• 滚动到节点：可选的滚动操作能让选中节点自动出现在视口内，适合分类层级较深的场景。

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