MVC中jsTree 3通过Ajax刷新局部视图后变为普通UL LI节点的问题

这种情况我之前也碰到过，核心问题就是Ajax加载新的UL/LI后，没有重新触发jsTree的初始化逻辑——页面第一次加载时jsTree已经把原始的UL转换成了树形结构，但Ajax返回的是纯静态HTML，浏览器只会渲染成普通列表，不会自动变成jsTree。下面是具体的解决办法：

1. 把jsTree初始化代码封装成可复用函数 #

首先把页面初始加载时的jsTree初始化逻辑抽成独立函数，这样每次Ajax更新后都能调用它重新渲染树形：

// 封装jsTree初始化函数
function initJSTree() {
    // 先销毁已存在的jsTree实例，避免冲突
    if ($('#tree-container').jstree(true)) {
        $('#tree-container').jstree('destroy');
    }
    
    // 重新初始化jsTree
    $('#tree-container').jstree({
        // 你的jsTree配置项，比如：
        'core': {
            'data': 'html', // 匹配你使用的HTML数据源
            'check_callback': true
        },
        // 其他插件配置（比如checkbox、contextmenu等，按需添加）
        'plugins': ['checkbox']
    });
}

2. 修改Ajax回调逻辑，更新DOM后重新初始化 #

在你的Ajax调用代码里，当成功获取局部视图的HTML后，先把内容插入到目标容器，再调用上面的initJSTree()函数：

// 示例Ajax调用代码
$.ajax({
    url: '/YourController/YourAction', // 替换为你的控制器Action地址
    type: 'GET',
    success: function (data) {
        // 把局部视图的HTML插入到树容器
        $('#tree-container').html(data);
        // 重新初始化jsTree，将普通UL/LI转为树形结构
        initJSTree();
    },
    error: function () {
        alert('加载树形结构失败');
    }
});

3. 确保局部视图的结构正确 #

你的_TreePartial.cshtml只需要输出标准的UL/LI结构即可，不需要额外的jsTree初始化代码，示例结构如下：

<ul>
    <li>节点1
        <ul>
            <li>子节点1-1</li>
            <li>子节点1-2</li>
        </ul>
    </li>
    <li>节点2</li>
</ul>

额外注意点 #

• 确保树容器的ID（比如#tree-container）在页面中唯一，避免选择器匹配错误；
• 如果你的jsTree有自定义事件绑定（比如节点点击、选中事件），要么把事件绑定逻辑放到initJSTree()里，要么用事件委托的方式绑定到父容器，避免更新后事件失效；
• 若使用的是较新版本的jsTree，也可以尝试用refresh方法代替销毁重建，但销毁重建的方式兼容性更强，不易出现残留状态问题。

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