ajax - bootstrap - jstree example

jsTree: cargar subnodos mediante ajax a pedido

Question

Intento que jsTree trabaje con la carga bajo demanda de subnodos. Mi código es este:

jQuery(''#introspection_tree'').jstree({ "json_data" : { "ajax" : { url : "http://localhost/introspection/introspection/product" } }, "plugins" : [ "themes", "json_data", "ui" ] });

El json regresó de la llamada es

[ { "data": "Kit 1", "attr": { "id": "1" }, "children": [ [ { "data": "Hardware", "attr": { "id": "2" }, "children": [ ] } ], [ { "data": "Software", "attr": { "id": "3" }, "children": [ ] } ] ] } ..... ]

Cada elemento puede tener muchos hijos, el árbol va a ser grande. Actualmente esto está cargando todo el árbol a la vez, lo que podría llevar algo de tiempo. ¿Qué debo hacer para implementar la carga bajo demanda de nodos secundarios cuando los abre el usuario?

Gracias por adelantado.

Answer 1

Irishka me apuntó en 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 solo se realiza para mayor claridad. El primero enumera todos los productos en el nivel superior, el segundo enumera todos los hijos de un producto dado 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 se necesitan datos estáticos, el árbol ahora es completamente dinámico en cada nivel.

Answer 2

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 tiene que modificar es agregar "state" : "closed" a los nodos cuyos nodos secundarios se cargarán bajo demanda.

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 jsTree

NOTA: Si se configuran tanto los datos como ajax, el árbol inicial se representa a partir de la cadena de datos. Al abrir un nodo cerrado (que no tiene hijos cargados) se realiza una solicitud de AJAX.

Answer 3

Dediqué horas en este problema. Finalmente lo entendí de esa manera:

$("#resourceTree").jstree({
    "types": {
      "default": {
        "icon": "fa fa-folder-open treeFolderIcon",
      }
    },
    "plugins": ["json_data", "types", "wholerow", "search"],
    "core": {
      "multiple": false,
      "data": {
        "url" : function(node){
          var url = "rootTree.json";
          if(node.id === "specialChildSubTree")
            url = "specialChildSubTree.json";
          return url;
        },
        "data" : function(node){
          return {"id" : node.id};
        }
      }
    },
  });

rootTree.json:

[
  {
    "text": "Opened root folder",
    "state": {
      "opened": true
    },
    "children": [
      {
        "id" : "specialChildSubTree",
        "state": "closed",
        "children":true
      }
    ]
  }
]

specialChildSubTree.json:

[
  "Child 1",
  {
    "text": "Child 2",
    "children": [
      "One more"
    ]
  }
]

Así que marcó el nodo que se convierta en el padre del subárbol cargado de Ajax con una identificación, observo en la configuración central.

NOTA: Ese nodo debe tener el parámetro "estado": "cerrado" y debe tener el parámetro "hijos": verdadero.

Estoy usando jsTree.js en la versión 3.3.3

Answer 4

necesita configurar elementos raíz como datos de árbol en la carga de la página y luego podrá recuperar sus hijos con una solicitud de 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 más detalles