Потеря форматирования при перезагрузке данных при вызове AJAX

Question

У меня проблема, когда я перезагружаю jstree с данными из моего AJAX вызова. Таким образом, при загрузке он работает нормально, но при добавлении данных и получении ответа дерево теряет свою структуру

Исходный 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), это не сработает.

Запустите фрагменты, чтобы увидеть его в действии:

Работает:

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