使用新的json数据重新创建整个jstree实例
我希望用新的json数据替换jstree树的全部内容。
我正在使用jsTree 1.0从2011年7月25日从github下载
说我有这个function……
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" ] }); } 其中demo1指的是a
我要做的是用我从服务器加载的新数据完全替换树。 然而，出于这个问题的目的，让我假装我只想这样做……
$(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 });
我是根据这个链接做到这一点的，Ivan似乎主张这个http://groups.google.com/group/jstree/browse_thread/thread/b40a1f0ab0f9a66b?fwc=2
然而，正在发生的事情是，在第二次调用init时，我最终在firebug中发现了这个错误
instance._get_settings不是函数
我试着叫破坏
$("#demo1").jstree("destroy");
但这并没有解决我的问题。
如何用新的json数据替换整个树？
这是我如何解决这个问题： – 在函数中包装树的所有绑定和初始化 – 从我的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, ..."); } } })
我有同样的问题。 版本jsTree – 3.0。*。 A已经在下一个方面解决了它：
$(function (){ var data = JSON.parse(''); initTree(data); var data1 = JSON.parse(''); var flag = 0; $("#butree").on("click", function () { if (flag) { $("#termtree").jstree("destroy"); initTree(data); flag = 0; } else { $("#termtree").jstree("destroy"); initTree(data1); flag = 1; } }); });