web-dev-qa-db-ja.com

DynaTreeをリロード/リフレッシュ/再起動する方法は？

私が次のことをするとき

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

Dynatreeに現在のツリーデータを忘れて、代わりに指定されたURLからの新しいデータをリロードしてほしい。しかし、デフォルトではそれを行わないことがわかりました。

ありがとう。

javascriptjquerytreeviewdynatreejquery-dynatree
14
Mr Coder

tree.reload()メソッドを見てください、それはあなたが求めていることをするはずです。

こちらのドキュメントを参照してください： http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html#h8.2

ドキュメントのように、ツリーはツリーの内部図面であり、getTreeコマンドを呼び出すことで取得できます：$("#node").dynatree("getTree")

14
longstaff

tree.reload();は、Ajaxのように動的にロードされるデータ用です。 ul/liリストを使用していて、ツリーをリロードする必要がある場合は、次のことを行う必要があります。$("#tree").dynatree("destroy");before通常のダイナツリー作成コード。 destroyパラメーターは文書化されていません（ http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html を参照）。

8
movAX13h

この質問は 新しいデータでダイナツリーをリロード/更新しようとしています の複製です

私のソリューションでは、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に構成を設定し、ツリーを再ロードします。

5
user1737092

初期化を機能させる：

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

InitTree();

データをリロードするには、次のコマンドを呼び出します。

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

dynatreeをリロードする場合は、最初にノードを削除します。以下のコードを使用します。

$（ "＃tree"）。dynatree（ "getRoot"）。removeChildren（）;

2
Elamathi Rajendran

当初、私は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;
            }
        }


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