Ricreare intera istanza jstree con i nuovi dati JSON

Question

Vorrei sostituire l'intero contenuto di un albero jstree con nuovi dati JSON.

sto usando jsTree 1.0 scaricato 25 Luglio 2011 da github

Dire che ho questa funzione ...

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

dove demo1 si riferisce ad un

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

Quello che ho sto cercando di sostituire completamente l'albero con i nuovi dati che carico dal mio server. Ai fini di questa domanda, però, facciamo finta Voglio solo fare questo ...

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

}); 

sto facendo questo in base a questo link, dove Ivan sembra sostenere questa http://groups.google.com/group/jstree/browse_thread/thread/b40a1f0ab0f9a66b?fwc=2

Tuttavia, quello che sta succedendo è che, al 2 ° chiamata a init, finisco per geting questo errore in firebug

instance._get_settings non è una funzione

Ho provato a chiamare distruggere

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

ma che non ha risolvere il mio problema.

Come posso sostituire l'intero albero con i nuovi dati JSON?

Answer 1

Ecco come ho risolto questo problema: - avvolgere tutte le associazioni e l'inizializzazione di un albero in una funzione - chiamare questa funzione dalla mia funzione document.ready (questo si occupa la configurazione iniziale del albero) - per il successo callback della mia chiamata ajax, ho distruggere l'albero e quindi chiamare nuovamente la funzione

Ecco il codice:

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

ho avuto lo stesso problema. Versione jsTree - 3.0. *. Una ha risolto nel modo seguente:

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