重新加载整个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

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

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

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