Javascript 如何重新加载/刷新/重新初始化 DynaTree？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7318116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to reload/refresh/reinit DynaTree?
提问by Mr Coder
When I do the following
当我执行以下操作时
$('#tree').dynatree("option","initAjax",{url:"http://google.com"});
I want dynatree to forget about current tree data and reload with new data from the specified url instead. But I find it does not do that by default.
我希望 dynatree 忘记当前的树数据，而是从指定的 url 重新加载新数据。但我发现默认情况下它不会这样做。
Thanks.
谢谢。
回答by longstaff
look at the tree.reload()method, it should do what you are after.
看看tree.reload()方法，它应该做你所追求的。
see the docs here: http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html#h8.2
请参阅此处的文档：http: //wwwendt.de/tech/dynatree/doc/dynatree-doc.html#h8.2
as in the docs, the tree is the internal drawing of the tree, and you get it by calling the getTree command: $("#node").dynatree("getTree")
在文档中，树是树的内部绘图，您可以通过调用 getTree 命令来获取它： $("#node").dynatree("getTree")
回答by movAX13h
tree.reload();is for data loaded dynamically as in Ajax. If you are working with ul/li lists and need to reload your tree, you have to do:
$("#tree").dynatree("destroy");beforeyour regular dynatree creation code. The destroyparameter is not documented.
tree.reload();用于像在 Ajax 中一样动态加载的数据。如果您正在使用 ul/li 列表并需要重新加载您的树，您必须：
$("#tree").dynatree("destroy");在您的常规 dynatree 创建代码之前。该destroy参数没有记录。
回答by user1737092
This question is a duplicate of Trying to reload/refresh dynatree with new data
此问题与Trying to reload/refresh dynatree with new data重复
My solution does not require detours like empty()and destroy()etc. Think about this:
When the Dynatree is created you specify a dictionary of settings it must use.
However as this is a configuration dictionary it will not be reevaluated even though some parameters are variables and change due to clicks etc.
So to solve this and avoid expensive operations like deleting the DOM and recreating it we do it the way I think the Dynatree developers has this intended (but not so clearly documented in the AJAX/JSON example):
我的解决方案并不需要像弯路empty()和destroy()等想一想：当Dynatree创建您指定的设置，它必须使用的字典。然而，由于这是一个配置字典，它不会被重新评估，即使某些参数是变量并且由于点击等而改变。所以为了解决这个问题并避免昂贵的操作，比如删除 DOM 并重新创建它，我们按照我认为 Dynatree 开发人员的方式来做有这个意图（但在 AJAX/JSON 示例中没有明确记录）：
//The HTML:
<input name="filter" id="checkbox" type="checkbox" value="X">Checkme<br>
<label id="mylabel"></label>
$("#checkbox").click(function() {
$("#mylabel").text($(this).is(":checked"))
$("#tree").dynatree("option", "initAjax", {
url: "myurl/myphp.php",
data: {
myparameter: $("#checkbox").is(":checked").toString()
}
});
$("#tree").dynatree("getTree").reload();
});
This example sets the configuration on the #treeevery time the button is clicked, then reloads the tree.
此示例在#tree每次单击按钮时设置配置，然后重新加载树。
回答by Arvy
Function the initialization:
函数初始化：
function InitTree() {
$("#tree3").dynatree({
(...init params...)
});
}
InitTree();
To reload data, call:
要重新加载数据，请调用：
$("#tree3").dynatree("destroy");
InitTree();
回答by Elamathi Rajendran
if You Want To Reload the Dynatree Means First Remove the node By he below code
如果你想重新加载 Dynatree 意味着首先通过下面的代码删除节点
$("#tree").dynatree("getRoot").removeChildren();
$("#tree").dynatree("getRoot").removeChildren();
回答by Sandeepraj Tandon
Initially, i was using the "options" with initAjax to make the ajax call. However, since i had to show an error message incase there was an empty response from the server after the reload, i decided to go the usual ajax route. I make the ajax call, get the response and then reload the tree. So i did it like this in my javascript file
最初，我使用带有 initAjax 的“选项”来进行 ajax 调用。但是，由于我必须显示错误消息，以防在重新加载后来自服务器的响应为空，因此我决定采用通常的 ajax 路由。我进行 ajax 调用，获得响应，然后重新加载树。所以我在我的 javascript 文件中这样做了
var myObj = {getDynaTree :function(){
//Refresh the dynatree
$("#dynaTree").dynatree("option", "children", null);
$.ajax({
url: "myurl",
type: "POST",
dataType: "application/json",
headers:{'Accept' :'application/json', 'Content-Type': 'application/json' },
data : JSON.stringify(myData),
//handle the response
complete : function(treeData)
{
$("#dynaTree").dynatree("option", "generateIds", true);
var parsedTreeData = JSON.parse(treeData.responseText);
if(parsedTreeData.length ==0) {
var parsedTreeData = [{title: "No documents found for the search criteria, please revisit the criteria",
isFolder: false, tooltip: "No documents found for the search criteria, please revisit the criteria" }];
}
$("#dynaTree").dynatree("option", "children", parsedTreeData);
$("#dynaTree").dynatree("getTree").reload();
}
});
}}
Calling function
调用函数
$("#myLink").click(function() { myObj.getDynaTree(); }
The dynatree was initialized in a seperate javascript file
dynatree 在单独的 javascript 文件中初始化
//Initialization for the dyna tree.
var treeData = [{title: "Dynamic Tree Demo",isFolder: false, tooltip: "Here, is your Dynamic Tree!" }];
jQuery(document).ready(function() {
initReqActions(treeData);
});
initReqActions= function(myTree){
$("#dynaTree").dynatree({
checkbox: false,
selectMode: 2,
// create IDs for HTML elements that are generated
generateIds: true,
cookie: {
expires :-1
},
children: myTree,
onQuerySelect: function(select, node) {
if( node.data.isFolder )
return false;
},
onClick: function(node, event) {
if( ! node.data.isFolder )
node.toggleSelect();
},
onDblClick: function(node, event) {
node.toggleExpand();
},
onKeydown: function(node, event) {
if( event.which == 32 ) {
node.toggleSelect();
return false;
}
}
});
}
回答by alnkapa
n= "#tree";
$(n).dynatree({});
tree = $(n).dynatree("getTree");
root = tree.getRoot();
tree.enableUpdate(false);
root.removeChildren();
tree.enableUpdate(true);
