在 AJAX 調用上重新加載數據時丟失格式

Question

當我使用來自 AJAX 調用的數據重新加載 jstree 時遇到問題。 所以在加載它工作正常，但添加數據，並得到響應樹失去了它的結構

初始 html 是一個空 div，使用 ajax 在按鈕單擊時更新數據

<div id="pnlTree">                  

  <div id="jstree" style="text-align: left">

  </div>
</div>

success: function (data) 
        {
            if( data )
            {
                    var output = '<ul class="appointmentlist">';
                    $.each(data, function(key, val){

                        output += "<li id='"+data[key].data1+"' name='dtpurchase'"+counter+"' value='" + data[key].data2 + "'>" +dtdata + "</li>";
                        //output += '<a id="dtappointment" name="dtpurchase" value="' + data[key].data3 + '"'+ '>'+data[key].purchase_date + '</a>';
                         //output += '</li>';
                         counter++;

                    });
                    output += '</ul>';
                $('#jstree').html(output);
            }

        },

我嘗試過刷新，重新加載，但似乎沒有任何解決問題的方法。

Answer 1

Soooo 您需要做的是在更新數據后refresh()樹。 現在這僅適用於 append 元素的日期$("#jstree").jstree(true).settings.core.data = output 。 如果你使用$('#jstree').html(output)那么它不起作用

運行代碼片段以查看它的實際效果：

在職的：

 $('#jstree').jstree() function update() { var output = `<ul><li>New Item</li></ul>` $("#jstree").jstree(true).settings.core.data = output $('#jstree').jstree(true).refresh(); }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> <div id="jstree"> <ul> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> <button onclick="update()">Update data</button>

好的，所以第二個正在使用 AJAX。 它在 Stack Overflow 沙箱中不起作用，但它在正常的 HTML 頁面上起作用（參見屏幕截圖）。 這是完全相同的概念，您只需要以正確的順序應用它：

 $('#jstree').jstree() function update() { $.ajax({ url: "https://swapi.dev/api/people/1", success: function(data){ var output = `<ul> <li>${data.name}</li> <li>${data.eye_color}</li> <li>${data.height}</li> </ul>` $("#jstree").jstree(true).settings.core.data = output $('#jstree').jstree(true).refresh(); } }); }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> <div id="jstree"> <ul> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> <button onclick="update()">Update data</button>