2011-09-06 31 views
13

私は、次のDynaTreeを再読み込み/リフレッシュ/再登録する方法は?

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

を行うと、私はdynatreeは、現在のツリーデータを忘れて、代わりに指定されたURLから新しいデータで再ロードします。しかし、私はそれがデフォルトでそれをしないことを見つける。

ありがとうございました。

答えて

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作成コードを実行する必要があります。 destroyパラメータは文書化されていません(http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html参照)。

+0

非常に有用な情報です。ありがとう! – DavidB

5

この質問は私のソリューションはempty()destroy()などのような迂回はこれについて考える必要はありませんTrying to reload/refresh dynatree with new data

の複製である: 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で "options"を使ってajax呼び出しを行っていました。しかし、リロード後にサーバーから空の応答があったときにエラーメッセージを表示しなければならなかったので、私は通常のAjaxルートに進むことに決めました。私はajax呼び出しを行い、応答を取得してツリーをリロードします。 は、だから私はdynatreeが別々に初期化された私の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ファイルあなたはDynatreeをリロードしたい場合は

//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

手段をまず最初にノードを削除する彼は以下のコードによって

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

+0

それを待っていただきありがとうございました –

+0

私の喜び.... –

関連する問題