Cómo inicializar jsTree usando JSON

Question

hago jsTree de esta manera:

$("#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" : [] 
       } 
}); 

Y usuario ve la página con vacío jsTree. Debo inicializar mi jsTree cuando el usuario realice alguna acción. Pero no debería usar la inicialización de ajax (no debería usar "ajax" en "json_data"). Debo inicializar mi jsTree utilizando únicamente cadena como esta:

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": [] 
    }] 
}] 
}]' 

No importa lo que recibo esta cadena, cuando el usuario quiere ver el árbol ya he tenido esta cadena. Y aquí recibo una pregunta: ¿Cómo puedo inicializar jsTree y mostrarlo para el usuario utilizando únicamente la cadena a continuación?

Answer 1

Probablemente quieres algo como eso? http://jsfiddle.net/radek/fmn6g/11/

• Donde inserto jsTree en un botón, haga clic en.
• La función javascript on click inserta 'jstree' div y también contiene la definición de jsTree.
• Como puede ver, también uso el tipo de datos json.

Más información en mi pregunta display jsTree on click

Es eso lo que está después?

Answer 2

Aquí está mi solución:

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); 

Esta solución funcionará incluso si hemos creado AJAX para el modelo de carga antes.

De la documentación:

Si tanto los datos como el Ajax se establecen el árbol inicial se representan a partir de la cadena de datos. Al abrir un nodo cerrado (que no tiene hijos cargados) se realiza una solicitud de AJAX.

Más información está aquí http://www.jstree.com/documentation/json_data

decidí usar esta solución porque debo cambiar stringJSON varias veces y reconstruir el árbol usando esta cadena cambiada (sin necesidad de recargar la página).