Recrear toda la instancia jstree con nuevos datos json

Question

Deseo reemplazar todo el contenido de un árbol jstree con nuevos datos json.

estoy usando jsTree 1.0 descargado 25 de julio de 2011 de github

Decir que tengo esta función ...

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

donde demo1 se refiere a un

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

Lo que Lo que intento hacer es reemplazar completamente el árbol con nuevos datos que cargué de mi servidor. A los efectos de esta pregunta, sin embargo, vamos a suponer sólo quiero hacer esto ...

$(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 

}); 

que estoy haciendo esto en base a este enlace, en donde Iván parece abogar esta http://groups.google.com/group/jstree/browse_thread/thread/b40a1f0ab0f9a66b?fwc=2

Sin embargo, lo que sucede es que, en la segunda llamada a init, termino que consigue este error en Firebug

instance._get_settings no es una función

Traté de llamar destruir

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

pero eso no solucionar mi problema.

¿Cómo puedo reemplazar todo el árbol con nuevos datos json?

Answer 1

Así es como he resuelto este problema: - envolver todas las fijaciones y la inicialización del árbol en una función - llamar a esta función desde mi función document.ready (esto se encarga de la configuración inicial del árbol) - en el éxito devolución de llamada de mi llamada AJAX, me destruye el árbol y luego llamar de nuevo la función

Aquí está el código:

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

Answer 2

que tenían el mismo problema. Versión jsTree - 3.0. *. A han resuelto en la siguiente forma:

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