Recréer toute l’instance jstree avec de nouvelles données json

Je souhaite remplacer l’intégralité du contenu d’un arbre Jstree par de nouvelles données JSON.

J’utilise jsTree 1.0 téléchargé le 25 juillet 2011 à partir de github

Dis que j’ai cette fonction …

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" ] }); } 

où demo1 fait référence à un

 

Ce que j’essaie de faire est de remplacer complètement l’arbre par de nouvelles données que je charge depuis mon serveur. Aux fins de cette question, cependant, supposons que je veux juste faire ceci …

 $(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 }); 

Je fais cela en fonction de ce lien, où Ivan semble préconiser cette http://groups.google.com/group/jstree/browse_thread/thread/b40a1f0ab0f9a66b?fwc=2

Cependant, ce qui se passe est que, lors du deuxième appel à init, je finis par avoir cette erreur dans firebug

instance._get_settings n’est pas une fonction

J’ai essayé d’appeler détruire

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

mais cela n’a pas résolu mon problème.

Comment puis-je remplacer tout l’arbre par de nouvelles données JSON?

Voici comment j’ai résolu ce problème: – envelopper toutes les liaisons et l’initialisation de l’arbre dans une fonction – appeler cette fonction à partir de ma fonction document.ready (ceci gère la configuration initiale de l’arbre) – dans le rappel de succès de mon appel ajax, I détruire l’arbre, puis appeler à nouveau la fonction

Voici le code:

 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, ..."); } } }) 

J’ai eu le même problème. Version jsTree – 3.0. *. A l’ont résolu de la manière suivante:

 $(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; } }); });