在 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

您需要做的就是在更新数据后refresh() 树。 现在这仅在您将日期附加到带有$("#jstree").jstree(true).settings.core.data = output 的元素时才有效。如果你使用$('#jstree').html(output) 那就不行了

运行 sn-ps 以查看它的实际效果：

工作：

$('#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>