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

在我自己搜索解决方案时找到您的帖子，但在网络上找不到任何解决方案。

但我只想到一个小技巧，它确实有效，以防万一它可以帮助你或其他人。

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

＆＃13;

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

＆＃13;

然后清空容器并追加到树的div中。此时初始化花式树，它将加载新的设置和内容。

＆＃13;

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

＆＃13;

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

9 个答案: