Come inizializzare jsTree utilizzando JSON

Question

Faccio jsTree in questo modo:

$("#myTree").jstree({ 
       "plugins": ["themes", "json_data", "ui", "crrm", "dnd"], 
       "themes": { 
        "theme": "default", 
        "dots": false, 
        "icons": false, 
        "url": "../../Content/jsTreeThemes/default/style.css" 
       }, 
       "json_data": { 
        "data" : [] 
       } 
}); 

E la pagina utente vede con vuoto jsTree. Devo inizializzare il mio jsTree quando l'utente esegue un'azione. Ma non ho bisogno di inizializzare l'ajax (non dovrei usare "ajax" in "json_data"). Devo inizializzare il mio jsTree utilizzando solo stringa come questa:

var stringJSON = [{ 
    "attr": { 
     "id": "1", 
     "rel": "root", 
     "mdata": null 
    }, 
    "data": "title": "root_jsTree", 
    "icon": null 
}, "state": "open", 
"children": [{ 
    "attr": { 
     "id": "7", 
     "rel": "folder", 
     "mdata": null 
    }, 
    "data": { 
     "title": "1", 
     "icon": null 
    }, 
    "state": "", 
    "children": [{ 
     "attr": { 
      "id": "10", 
      "rel": "folder", 
      "mdata": null 
     }, 
     "data": { 
      "title": "leaf", 
      "icon": null 
     }, 
     "state": "", 
     "children": [] 
    }] 
}, { 
    "attr": { 
     "id": "8", 
     "rel": "folder", 
     "mdata": null 
    }, 
    "data": { 
     "title": "leaf", 
     "icon": null 
    }, 
    "state": "", 
    "children": [{ 
     "attr": { 
      "id": "9", 
      "rel": "folder", 
      "mdata": null 
     }, 
     "data": { 
      "title": "leaf", 
      "icon": null 
     }, 
     "state": "", 
     "children": [] 
    }] 
}] 
}]' 

Non importa quanto ricevo questa stringa, quando l'utente vuole vedere l'albero ho già avuto questa stringa. E qui ho una domanda: come posso inizializzare jsTree e visualizzarlo per l'utente usando solo la stringa sottostante.

Answer 1

Probabilmente vuoi qualcosa del genere? http://jsfiddle.net/radek/fmn6g/11/

• Dove inserisco jsTree su un clic del pulsante.
• La funzione javascript on click inserisce 'jstree' div e contiene anche la definizione jsTree.
• Come potete vedere, utilizzo anche il tipo di dati JSON.

Maggiori informazioni nella mia interrogazione display jsTree on click

È questo che siete dopo?

Answer 2

Ecco la mia soluzione:

var jsTreeSettings = $("#myTree").jstree("get_settings"); 
jsTreeSettings.json_data.data = $.parseJSON(stringJSON); 
$.jstree._reference("myTree")._set_settings(jsTreeSettings); 

// Refresh whole our tree (-1 means root of tree) 
$.jstree._reference("myTree").refresh(-1); 

Questa soluzione funziona anche se abbiamo creato per il modello AJAX caricamento prima.

Da documentazione:

Se entrambi i dati e Ajax sono impostati l'albero iniziale è reso dalla stringa di dati. Quando si apre un nodo chiuso (che non ha figli caricati) viene fatta una richiesta AJAX.

Ulteriori informazioni sono qui http://www.jstree.com/documentation/json_data

Ho deciso di usare questa soluzione perché devo cambiare stringJSON diverse volte e ricostruire dell'albero utilizzando questa stringa modificata (senza ricaricare la pagina).