как перезагрузить / обновить / переустановить DynaTree?

Question

Когда я делаю следующее

$('#tree').dynatree("option","initAjax",{url:"http://google.com"});

, я хочу, чтобы dynatree забыл о текущих данных дерева и перезагрузил с новыми данными из указанного URL.Но я считаю, что по умолчанию этого не происходит.

Спасибо.

Answer 1

посмотрите на метод tree.reload(), он должен делать то, что вам нужно.

см. Документы здесь: http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html#h8.2

Как и в документации, дерево является внутренним рисунком дерева, и вы получите его, вызвав команду getTree: $("#node").dynatree("getTree")

Answer 2

tree.reload(); для данных, загружаемых динамически, как в Ajax. Если вы работаете со списками ul / li и вам необходимо перезагрузить дерево, вам нужно сделать: $("#tree").dynatree("destroy"); до вашего обычного кода создания dynatree. Параметр уничтожения не задокументирован (см. http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html).

Answer 3

Этот вопрос является дубликатом Попытка перезагрузить / обновить 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 устанавливается при каждом нажатии кнопки, а затем перезагружается дерево.

Answer 4

Функция инициализации:

function InitTree() {
   $("#tree3").dynatree({
       (...init params...)
   });
}

InitTree();

Чтобы перезагрузить данные, позвоните:

$("#tree3").dynatree("destroy");
InitTree();

Answer 5

, если вы хотите перезагрузить средства Dynatree. Сначала удалите узел. Он должен быть ниже кода

$ ("# tree"). Dynatree ("getRoot"). RemoveChildren ();

Answer 6

Первоначально я использовал «опции» с 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;
            }
        }


    });
}

Answer 7

n= "#tree";
$(n).dynatree({});
tree = $(n).dynatree("getTree");
root = tree.getRoot();
tree.enableUpdate(false);
root.removeChildren();
tree.enableUpdate(true);