我有一个包含不同选项的组合框，每个选项都会在屏幕上显示一个花式树。
我进行了 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);
//...
}
});
在自己搜索解决方案时找到了您的帖子，但在网上找不到任何内容。
但是我只是想了一个小技巧，它确实有效，以防万一它对您或其他人有所帮助。
只需删除树 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"}
]}
];
创建一个容器 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({
...经过多次尝试，这个例子对我非常有用：
$.ui.fancytree.getTree("#tree1").reload([
{title: "node1"},
{title: "node2"}
]).done(function(){
alert("reloaded");
});
this.$('.tree-wrapper').fancytree({
source: []
...
});
var tree = this.$('.tree-wrapper').fancytree('getTree');
在您的回调中
tree.reload(mynodes)
source您必须为树初始化提供一个空数组。
在 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');
});
}
});
}
快乐编码！
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.phpFancyTree 并将数据加载到 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
});
就是这样。快乐编码:)
PS这适用于v2.26.0
重新加载主树的另一种最简单的方法是：
$("#treegrid").fancytree("getRootNode").tree.reload();