2011-09-06 47 views
13

當我做了以下如何重新加載/刷新/重新建立DynaTree?

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

我想dynatree忘掉當前樹的數據,並與從指定的網址,而不是新的數據加載。但我發現它默認不會這樣做。

謝謝。

回答

13

看看tree.reload()的方法,它應該做你以後的事情。

在這裏看到的文檔:http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html#h8.2

如文檔,樹是樹的內部圖紙,並通過調用getTree命令得到它:$("#node").dynatree("getTree")

+0

什麼是「樹」在這裏,我如何獲得它的訪問? –

+0

你在嗎? –

+0

我已添加一個編輯更清晰。 – longstaff

5

功能初始化:

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

InitTree(); 

要重新加載數據,請致電:

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

tree.reload();用於在Ajax中動態加載數據。如果您正在使用ul/li列表並需要重新加載樹,則必須執行以下操作: $("#tree").dynatree("destroy");之前您的常規dynatree創建代碼。銷燬參數未記錄(請參閱http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html)。

+0

非常有用的信息。謝謝! – DavidB

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配置,然後重新加載樹。

+1

鏈接只有答案不歡迎在SO – hims056

+4

感謝您的教育。我編輯了我的答案,包括完整的答案。 – user1737092

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

最初,我使用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; 
      } 
     } 


    }); 
} 
2

如果你想重新加載Dynatree意思是先刪除節點按以下代碼

$( 「#樹」)dynatree( 「getRoot」)removeChildren此()。

+0

謝謝你正在等待它 –

+0

我的榮幸.... –