Как перезагрузить / обновить / переустановить DynaTree?
Когда я делаю следующее
$('#tree').dynatree("option","initAjax",{url:"http://google.com"});
Я хочу, чтобы dynatree забыла о текущих данных дерева и перезагрузила новые данные из указанного URL. Но я считаю, что по умолчанию этого не происходит.
Благодарю.
7 ответов
Посмотри на tree.reload()
метод, он должен делать то, что вы после.
см. документы здесь: http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html
как и в документах, дерево является внутренним чертежом дерева, и вы получите его, вызвав команду getTree: $("#node").dynatree("getTree")
tree.reload();
для данных, загружаемых динамически, как в Ajax. Если вы работаете со списками ul / li и вам необходимо перезагрузить дерево, вам нужно сделать:$("#tree").dynatree("destroy");
перед вашим обычным кодом создания dynatree. Параметр уничтожения не задокументирован (см. http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html).
Этот вопрос является дубликатом Попытки перезагрузить / обновить Dynatree с новыми данными
Мое решение не требует обходных путей, как 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();
});
Этот пример устанавливает конфигурацию на #tree
каждый раз, когда нажимается кнопка, дерево перезагружается.
Функция инициализации:
function InitTree() {
$("#tree3").dynatree({
(...init params...)
});
}
InitTree();
Чтобы перезагрузить данные, позвоните:
$("#tree3").dynatree("destroy");
InitTree();
Если вы хотите перезагружать средства Dynatree, сначала удалите узел
$("# Дерево") dynatree("GetRoot") removeChildren()..;
Первоначально я использовал "параметры" с 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();
}
});
}}
Функция вызова
$("#myLink").click(function() { myObj.getDynaTree(); }
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;
}
}
});
}
n= "#tree";
$(n).dynatree({});
tree = $(n).dynatree("getTree");
root = tree.getRoot();
tree.enableUpdate(false);
root.removeChildren();
tree.enableUpdate(true);