Si te encuentras con alguna parte que te causa duda nos puedes dejar un comentario y haremos todo lo necesario de ayudarte rápidamente.
Irishka me indicó la dirección correcta, pero no resuelve completamente mi problema. Jugueteé con su respuesta y se me ocurrió esto. El uso de dos funciones de servidor diferentes se realiza solo para mayor claridad. El primero enumera todos los productos en el nivel superior, el segundo enumera todos los elementos secundarios de un ID de producto determinado:
jQuery("#introspection_tree").jstree(
"plugins" : ["themes", "json_data", "ui"],
"json_data" :
"ajax" :
"type": 'GET',
"url": function (node)
var nodeId = "";
var url = ""
if (node == -1)
url = "http://localhost/introspection/introspection/product/";
else
nodeId = node.attr('id');
url = "http://localhost/introspection/introspection/children/" + nodeId;
return url;
,
"success": function (new_data)
return new_data;
);
Los datos json devueltos por las funciones son así (observe el estado = cerrado en cada nodo):
[
"data": "Kit 1",
"attr":
"id": "1"
,
"state": "closed"
,
"data": "KPCM 049",
"attr":
"id": "4"
,
"state": "closed"
,
"data": "Linux BSP",
"attr":
"id": "8"
,
"state": "closed"
]
No static se necesitan datos, el árbol ahora es completamente dinámico en cada nivel.
Supongo que sería bueno mostrar por defecto nodos de primer nivel y luego los niños se cargarán a pedido. En ese caso lo único que tienes que modificar es añadir "state" : "closed" a los nodos cuyos nodos secundarios se van a cargar a pedido.
Es posible que desee enviar la identificación del nodo en una llamada ajax para que modifique su código
"json_data":
//root elements to be displayed by default on the first load
"data": [
"data": 'Kit 1',
"attr":
"id": 'kit1'
,
"state": "closed"
,
"data": 'Another node of level 1',
"attr":
"id": 'kit1'
,
"state": "closed"
],
"ajax":
url: "http://localhost/introspection/introspection/product",
data: function (n)
return
"nodeid": $.trim(n.attr('id'))
De la documentación de jsTree
NOTA: Si se configuran tanto los datos como ajax, el árbol inicial se representa a partir de los datos. string. Al abrir un nodo cerrado (que no tiene hijos cargados) se realiza una solicitud AJAX.
debe configurar los elementos raíz como datos de árbol en la carga de la página y luego podrá recuperar sus elementos secundarios con una solicitud ajax
$("#introspection_tree").jstree(
"plugins": ["themes", "json_data", "ui"],
"json_data":
//root elements
"data": ["data": 'Kit 1', "attr": "id": 'kit1' /*, ... */], //the 'id' can not start with a number
"ajax":
"type": 'POST',
"data": "action": 'getChildren',
"url": function (node)
var nodeId = node.attr('id'); //id="kit1"
return 'yuorPathTo/GetChildrenScript/' + nodeId;
,
"success": function (new_data)
//where new_data = node children
//e.g.: ['data':'Hardware','attr':'id':'child2', 'data':'Software','attr':'id':'child3']
return new_data;
);
Vea mi respuesta a una pregunta similar aquí (la parte anterior) para obtener más detalles
Comentarios y valoraciones
Te invitamos a respaldar nuestra faena añadiendo un comentario y puntuándolo te damos las gracias.