jquery - 重新加载整个 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);
      //...
    }
  });