Обновить весь Fancytree

Question

У меня есть combobox с различными параметрами, каждый из которых поднимает fancytree на экран.

Я делаю вызов ajax, чтобы получить источник для fancytree, но он не перезагружается и показывает одни и те же параметры снова и снова.

часть кода:

$.ajax({ 
url: "get_treedata.php", 
type: "POST", 
data: { 
     id: id 
     }, 
success: function(json){ 
    console.log(json); 

    var mynodes = JSON.parse(json); 
    $('#t-board').fancytree(// t-board is my div container 
     { 
      source: mynodes, 
      ... // my other options 
    }); 
    } 
}); 

, что код внутри функции, которую я называю в «OnChange» моего ComboBox. Расскажите мне, что вы думаете, и если мне нужно быть более конкретным или что-то еще.

Заранее спасибо.

Answer 1

Вы не можете повторно инициализировать дерево. Но вы можете обновить параметры дерева или перезагрузить его с помощью новой опции источника.

• Обновить дерево с опцией нового источника

  var treeOptions = {...}; // initial options 
  $('#t-board').fancytree(treeOptions); 
  $('#combobox').change(function() { 
  var id = $('option:selected', this).val(); 
  
      var newSourceOption = { 
      url: 'get_treedata.php', 
      type: 'POST', 
      data: { 
       id: id 
      }, 
      dataType: 'json' 
      }; 
  
      var tree = $('#t-board').fancytree('getTree'); 
      tree.reload(newSourceOption); 
  }); 
  

• Добавить или заменить других варианты дерева

  var treeOptions0 = {...}; // initial options 
  var treeOptions1 = {...}; // other tree options 
  var treeOptions2 = {...}; 
  $('#t-board').fancytree(treeOptions0); 
  $('#combobox').change(function() { 
  
      var id = $('option:selected', this).val(); 
  
      if(id === '1'){ 
      $('#t-board').fancytree('option', 'selectMode', treeOptions1.selectMode); 
      $('#t-board').fancytree('option', 'renderNode', treeOptions1.renderNode); 
      $('#t-board').fancytree('option', 'icons', treeOptions1.icons); 
      //... 
      }else if(id === '2'){ 
      $('#t-board').fancytree('option', 'selectMode', treeOptions2.selectMode); 
      $('#t-board').fancytree('option', 'renderNode', treeOptions2.renderNode); 
      $('#t-board').fancytree('option', 'icons', treeOptions2.icons); 
      //... 
      } 
  }); 
  

Answer 2

Найдены свой пост во время поиска решения самого, и могут не найти в Интернете.

Но я просто подумал о небольшом трюке, и это действительно сработало, если оно поможет вам или кому-то еще.

Просто удалите дерево DIV, а затем положить его обратно и загрузить его снова, что-то вроде этого:

$("#tree").remove(); 
$("#tree_container").append('<div id="tree"></div>'); 
get_tree(); 

Answer 3

Вы также можете изменить источник дерева без изменения других параметров, используя следующий код:

$('#t-board').fancytree('option', 'source', myJsonData); 

Помните, что myJsonData должен быть корректным данные JSON, как:

var myJsonSource = [ 
    {title: "Node 1", key: "1"}, 
    {title: "Folder 2", key: "2", folder: true, children: [ 
     {title: "Node 2.1", key: "3", myOwnAttr: "abc"}, 
     {title: "Node 2.2", key: "4"} 
    ]} 
    ]; 

https://github.com/mar10/fancytree/wiki#configure-options

Answer 4

Создать контейнерный контейнер.

<div id="tree-container"> 
 
    <div id="tree" style="width: 100%;"></div> 
 
</div>

Затем пустой контейнер и добавить обратно в DIV для дерева. На этом этапе инициализируйте причудливое дерево и загрузите новые настройки и содержимое.

$("#tree-container").empty(); 
 
$("#tree-container").append('<div id="tree" style="width: 100%;"></div>'); 
 
// Initialize Fancytree 
 
$("#tree").fancytree({ 
 
...

Answer 5

this.$('.tree-wrapper').fancytree({ 
    source: [] 
    ... 
}); 
var tree = this.$('.tree-wrapper').fancytree('getTree'); 

На обратного вызова

tree.reload(mynodes) 

Вы должны предоставить пустой массив для source на дереве инициализации.

Answer 6

FancyTree выбирает сам JSON, вам не нужно делать это вручную:

var id = 3; 

$('#t-board').fancytree({ 
    source: { 
     url: 'get_treedata.php', 
     type: 'POST', 
     data: { 
      id: id 
     }, 
     cache: false 
    } 
    ... // other options 
}); 

Когда вам нужно передать другой id значение get_treedata.php и загрузки данных в FancyTree, вы просто установить новый вариант источника и FancyTree перезагружает себя:

id = 5; 

$('#t-board').fancytree('option', 'source', { 
    url: 'get_treedata.php', 
    type: 'POST', 
    data: { 
     id: id 
    } 
    cache: false 
}); 

короткий путь для перезагрузки FancyTree:

$('#t-board').fancytree({ 
    url: 'get_treedata.php', 
    type: 'POST', 
    data: { 
     id: id 
    } 
    cache: false 
}); 

Вот и все. Счастливое кодирование :)

P.S. Это работает на v2.26.0