如何重新加载/刷新/重新启动DynaTree?

时间:2011-09-06 10:00:38

标签: javascript jquery treeview dynatree jquery-dynatree

当我执行以下操作时

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

我希望dynatree忘记当前的树数据并使用指定url中的新数据重新加载。但我发现默认情况下不会这样做。

感谢。

7 个答案:

答案 0 :(得分:14)

查看tree.reload()方法,它应该完成您的工作。

请参阅此处的文档:http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html#h8.2

在文档中,树是树的内部绘图,您可以通过调用getTree命令来获取它:$("#node").dynatree("getTree")

答案 1 :(得分:8)

tree.reload();用于动态加载,如Ajax中所示。如果您正在使用ul / li列表并需要重新加载树,则必须执行以下操作: {/ 1}} 之前您的常规dynatree创建代码。未记录destroy参数(请参阅http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html)。

答案 2 :(得分:5)

初始化功能:

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

InitTree();

要重新加载数据,请致电:

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

答案 3 :(得分:5)

此问题与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上的配置,然后重新加载树。

答案 4 :(得分:2)

如果你想重新加载Dynatree手段首先删除节点由他下面的代码

$( “#树”)dynatree( “getRoot”)removeChildren此();

答案 5 :(得分:1)

最初,我正在使用&#34;选项&#34;使用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;
            }
        }


    });
}

答案 6 :(得分:0)

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