2011-07-26 15 views
14

jstreeツリーの内容全体を新しいjsonデータで置き換えたいと考えています。 githubの新しいjsonデータでjstreeインスタンス全体を再作成

から2011年7月25日にダウンロード

私はjsTree 1.0を使用していますが、私はこの機能を持っていると言う...

DEMO1は何

<div id="demo1"></div> 

を指し

function init_my_tree(my_json_data) 
{ 
    $("#demo1").jstree({ 
    themes: { 
     "theme": "classic", 
     "dots": false, 
     "icons": true, 
     "url": "//js.myliburl.com/jstree/themes/classic/style.css" 
    }, 
    json : { 
     data : my_json_data 
    }, 
    plugins : [ "core","ui","themes", "json" ] 
    }); 
} 

私のサーバーからロードする新しいデータでツリーを完全に置き換えることです。この質問の目的のために、しかし、

$(document).ready(function() { 
    var text_data = '[{"title":"All","data":{"jstree":{"opened":true}},"children":[{"title":"Item 1","data":{"jstree":{}},"children":false,"li_attr":{"id":"1","class":"jstree-leaf","href":"#"},"a_attr":{"href":"#"}},{"title":"Item B","data":{"jstree":{}},"children":false,"li_attr":{"id":"2","class":"jstree-last","href":"#"},"a_attr":{"href":"#"}}],"li_attr":{"id":"0","class":"jstree-last","href":"#"},"a_attr":{"href":"#"}}]'; 
    var my_json_data = $.parseJSON(text_data); 
    init_my_tree(my_json_data); // initialize the tree view 

    text_data = '[{"title":"Something Else","data":{"jstree":{"opened":true}},"children":[{"title":"Item A","data":{"jstree":{}},"children":false,"li_attr":{"id":"1","class":"jstree-leaf","href":"#"},"a_attr":{"href":"#"}},{"title":"Item 2","data":{"jstree":{}},"children":false,"li_attr":{"id":"2","class":"jstree-last","href":"#"},"a_attr":{"href":"#"}}],"li_attr":{"id":"0","class":"jstree-last","href":"#"},"a_attr":{"href":"#"}}]'; 
    my_json_data = $.parseJSON(text_data); 
    init_my_tree(my_json_data); // re-initialize the tree view to load with new data 

}); 

私はイワンがしかし、この http://groups.google.com/group/jstree/browse_thread/thread/b40a1f0ab0f9a66b?fwc=2

を提唱しているようだ、このリンクに基づいて、これをやっている...のは、私はこれをしたいふりをしましょう何が起こっていることは

instance._get_settings機能

ではありませんinitに第二の呼び出しで、私は放火犯でこのエラーをgeting終わる、ということです

私は

$("#demo1").jstree("destroy"); 

を破壊呼び出してみましたが、それは私の問題を解決しませんでした。

ツリー全体を新しいjsonデータで置き換えるにはどうすればよいですか?

答えて

12

は、ここで私は、この問題を解決する方法は次のとおりです。 - 機能 のツリーのすべてのバインディングと初期化を包む - (これはツリーの初期セットアップを扱う)私のdocument.ready関数からこの関数を呼び出す - 成功に私のAJAX呼び出しのコールバックが、私は木を破壊し、再度

を関数を呼び出すここでは、コードです:

function loadTargetTree() { 
    $("#target-book-tree").bind("select_node.jstree", function (e, data) { 
     data.rslt.obj; // the LI node that was clicked 
     selectedTargetID = data.rslt.obj.attr("id"); 
     if(data.rslt.obj.hasClass("book") || data.rslt.obj.hasClass("section")) { 
     targetChapterIsSelected = false; 
     toggleCopyTools() 
     } else { 
     targetChapterIsSelected = true; 
     toggleCopyTools(); 
     target_parent_id = selectedTargetID; 
     } 
    }); 

    $("#target-book-tree") 
     .jstree({ 
      core : { 
       "initially_open" : ["book_"+getParameterByName('target_book_id')], 
       "animation": 100 
       }, 
      "plugins":["themes","html_data","ui"], 
      "themes" : { 
       "theme" : "classic", 
       "dots" : true, 
       "icons" : false 
       }, 
      "ui" : { 
       "select_limit" : 1, 
       "selected_parent_close" : "deselect", 
       }, 
     }); 
} 


$(document).ready(function() { 
    loadTargetTree(); 
}); 



AND MY AJAX CALL: 

    var sendData = 'new_name='+$('input#new_name').val()+'&target_book_id='+target_book_id + '&source_lib_id='+source_lib_id + '&target_parent_id='+target_parent_id; 
    $.ajax({ 
      dataType: "json", 
     type: "POST", 
     url: "/ajax/CopySelectedSection", 
     data: sendData, 
     error: function(data) { 
      alert("Oops! An error occured. Please try again later.") 
     }, 
     success: function(data) { 
       if (data['status'] == "ok") { 
        $("div#target-book-tree").html(data['book_outline']); 
        $("#target-book-tree").jstree('destroy'); 
        loadTargetTree(); 
       } else { 
        alert("Sorry, ..."); 
       } 
     } 
    }) 
+2

"dnd"プラグインのようなものを使用すると、あなたの解決策はもう機能しませんでした。 –

+1

@SamanGholamiだから、どうすればいい? – DonkeyKong

9

私は同じ問題を抱えていました。バージョンjsTree - 3.0。*。 Aは次の方法でそれを解決しました:

$(function(){ 

      var data = JSON.parse('<?php echo $treedata;?>'); 
      initTree(data); 
      var data1 = JSON.parse('<?php echo $terminsData;?>'); 
      var flag = 0; 
      $("#butree").on("click", function() { 
       if (flag) { 
        $("#termtree").jstree("destroy"); 
        initTree(data); 
        flag = 0; 
       } else { 
        $("#termtree").jstree("destroy"); 
        initTree(data1); 
        flag = 1; 
       } 
      }); 
     }); 
+2

答えのためのThanjs。 'initTree'のコードをここに投稿できますか?ありがとう –

関連する問題