重新加载整个 Fancytree

Question

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

我进行了 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" 中调用的函数中。告诉我你的想法，如果我需要更具体的东西。

提前致谢。

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

在自己搜索解决方案时找到了您的post，但在网上找不到任何解决方案。

但我只是想到了一个小技巧，它确实奏效了，以防它对你或其他人有所帮助。

只需删除树 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

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

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

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

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

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

Answer 9

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

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

重新加载整个 Fancytree

Reload entire Fancytree

ajax

jquery

fancytree