重新加载整个花式树

Question

我有一个组合框，其中包含不同的选项，每个选项都会在屏幕上显示一个花哨的树。

我做了一个 ajax 调用来获取花哨树的源代码，但它没有重新加载，并且一次又一次地显示相同的选项。

部分代码：

$.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"中调用的函数中。告诉我你的想法，以及我是否需要更具体或其他什么。

提前谢谢。

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。

<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

经过多次尝试，这个例子对我来说真的很有用：

$.ui.fancytree.getTree("#tree1").reload([
          {title: "node1"},
          {title: "node2"}
        ]).done(function(){
          alert("reloaded");
        });

http://wwwendt.de/tech/fancytree/demo/sample-source.html#

Answer 6

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

在您的回调中

tree.reload(mynodes)

您必须提供一个空数组，以便在树初始化时source。

Answer 7

初始化 AJAX 调用之外的树：

$('#my-tree').fancytree({
    extensions: ["table"],
    focusOnSelect: true,
    autoCollapse: true,
    clickFolderMode: 3,
    table: {
        indentation: 20,
        nodeColumnIdx: 1
    }
});

然后，在 ajax 调用中重新加载树：

function loadData() {
    $.ajax({
        type: "POST",
        data:{
            id: $('#some-element').val(),
        },
        url: _URL_,
        success: function (result) {
            var tree = $('#my-tree').fancytree('getTree');
            tree.reload(result.data)
            .done(function() {
                // console.log('tree reloaded');
            });
        }
    });
}

祝您编码愉快！

Answer 8

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
});

重新加载花式树的更短方法：

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

就是这样。快乐的编码:)

附言这适用于 v2.26.0

Answer 9

重新加载主树的另一种最简单的方法是：

 $("#treegrid").fancytree("getRootNode").tree.reload();