重新加载整个 Fancytree

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

提前致谢。

您不能重新初始化树。但是您可以更新树选项或使用新的源选项重新加载它。

  • 使用新的源选项重新加载树

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

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

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

只需删除树 div,然后将其放回并重新加载,类似这样:

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

您也可以使用以下代码在不更改其他选项的情况下更改树源:

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

创建容器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({
...

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

关于你的回电

tree.reload(mynodes)

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

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

在您的 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');
            });
        }
    });
}

编码愉快!

经过多次尝试,这个例子对我很有用:

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

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

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

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