如何重新加载/刷新/重新初始化DynaTree？

Question

当我执行以下操作时

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

我希望Dynatree可以忘记当前的树形数据，并从指定的URL重新加载新数据。但是我发现默认情况下它并不会这样做。

谢谢。

- Mr Coder

Answer 1

请看tree.reload()方法，它应该可以实现你想要的功能。

文档在这里：http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html#h8.2

如文档所述，树是树形图的内部绘制，你可以通过调用$("#node").dynatree("getTree")命令获取它。

- longstaff

---

这里的“tree”是什么，我怎样才能访问它？ - Mr Coder

我认为你需要获取 $('#tree') 而不是 $("#node")，所以答案应该是 $("#tree").dynatree("getTree").reload()。 - AaA

Answer 2

tree.reload(); 用于动态加载数据，如 Ajax。如果您正在使用 ul/li 列表并需要重新加载树，则需要在常规 dynatree 创建代码之前执行：$("#tree").dynatree("destroy");。 destroy 参数未记录在文档中。

- movAX13h

Answer 3

初始化函数：

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

InitTree();

重新载入数据，请调用以下方法：

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

- Arvy

Answer 4

这个问题是Trying to reload/refresh dynatree with new data的重复。我的解决方案不需要像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上设置配置，然后重新加载树。

- user1737092

---

谢谢您的教导。我已编辑我的回答，包含完整的答案。 - user1737092

Answer 5

如果您想重新加载Dynatree，首先需要通过以下代码删除节点：

$("#tree").dynatree("getRoot").removeChildren();

注意：请保留HTML标签。

- Elamathi Rajendran

---

谢谢，一直在等它。 - Mr Coder

Answer 6

最初，我使用了“options”和“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(); }

动态树在单独的 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;
            }
        }


    });
}

- Sandeepraj Tandon

Answer 7

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

- alnkapa