Ajax成功后JSTREE列表无法在jQuery Dialog中加载求助

我来帮你排查下这个jstree不显示的问题，看了你的代码，主要有几个关键问题导致树组件没内容：

核心问题分析 #

• 元素未挂载到DOM就操作：你在拼接完tmp7后直接用$("#notetree")选择元素，但此时newDiv还没被添加到DOM、也没初始化dialog，选择器根本找不到对应的节点，自然无法初始化jstree。
• 未定义变量导致HTML拼接错误：代码里的counter和techtype是未定义的变量，会导致生成的树形结构HTML格式异常。
• JSTree初始化时机与数据格式错误：直接把HTML字符串赋值给settings.core.data不符合jstree的规范，且初始化时机过早，元素还未就绪。

修正后的完整代码 #

success : function(data) {
    // 拼接对话框内的HTML结构
    let tmp7 = "<div style='width:600px;'>";
    tmp7 += "<br/>";
    tmp7 += "<div id='diagTree' style='width:200px; height:300px; float:left; background-color:white;'>";
    tmp7 += "<br/>";
    tmp7 += "<div id='notetree' style='text-align: left'>";
    tmp7 += "</div>";
    tmp7 += "</div>";
    tmp7 += "<div style='width:400px; height:300px; float:left; background-color:white;'></div>";
    tmp7 += "</div>";

    // 方式1：生成JSTree支持的HTML结构（修正未定义变量问题）
    let typelist = '<ul class="notetypelist">';
    $.each(data, function(key, val){
        // 替换未定义的counter/techtype为data中的实际字段
        typelist += `<li id='${val.technicalid}' name='nttype' value='${val.note_type}'>${val.note_type}</li>`;
    });
    typelist += '</ul>';

    // 创建对话框容器并插入HTML
    let newDiv = $(document.createElement('div'));
    newDiv.html(tmp7);

    // 先初始化对话框，确保元素挂载到DOM后再操作JSTree
    newDiv.dialog({
        title: "树形分类",
        open: function() {
            // 获取对话框内的notetree元素（此时已挂载到DOM）
            let $noteTree = $(this).find('#notetree');
            // 插入树形结构HTML
            $noteTree.html(typelist);
            // 初始化JSTree
            $noteTree.jstree({
                core: {
                    themes: {
                        responsive: false
                    }
                },
                plugins: ["wholerow"] // 可选插件，根据需求添加
            });
        }
    });

    // ------------------------------
    // 方式2：推荐用JSTree原生数组格式（更稳定）
    // 注释上方方式1的typelist代码，替换为以下内容：
    // let treeData = [];
    // $.each(data, function(key, val){
    //     treeData.push({
    //         id: val.technicalid,
    //         text: val.note_type,
    //         children: [] // 如果有子节点可在此添加
    //     });
    // });
    // 在dialog的open事件中初始化：
    // $noteTree.jstree({
    //     core: {
    //         data: treeData,
    //         themes: { responsive: false }
    //     },
    //     plugins: ["wholerow"]
    // });
    // ------------------------------
}

关键修改点说明 #

1. 延迟JSTree初始化时机：在dialog的open事件中操作jstree，确保元素已经被挂载到DOM中，能被正确选中。
2. 修复变量错误：把未定义的counter和techtype替换为data返回的实际字段，避免HTML拼接出错。
3. 推荐使用数组格式数据：JSTree对数组格式的数据源支持更稳定，不容易出现格式兼容问题，注释中提供了这种方式的示例。

额外检查项 #

• 确保JSTree的CSS和JS文件已正确引入，没有404错误。
• 打开浏览器控制台，检查是否有变量未定义、元素找不到等报错信息。
• 确认Ajax返回的data结构正确，每个对象包含technicalid和note_type字段。

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