cómo obtener los metadatos de jsTree.

Question

Este es mi código:

$("#demo1").jstree({ 
     "themes": { 
      "theme": "default", 
      "dots": true, 
      "icons": true, 
      "url": "static/themes/default/style.css" 
     }, 
     "ui" : { 
       // this makes the node with ID node_4 selected onload 
       "initially_select" : [ location.hash.slice(1).split('@')[1]] 
      }, 
     "json_data" : { 
      "data" : [ 
       { 
        "data" : "A node", 
        "attr" : { "id" : "1" ,time:1321}, 
        "callback":function(){alert('sss')}, 
        "children" : [ 
         { 
          "data" : "ttt node", 
          "children" : [ "Child 1", "Child 2" ] 
         } 
        ] 
       }, 
       { 
        "attr" : { "id" : "2" }, 
        "data" : { 
         "title" : "Long format demo", 
         "attr" : { "href" : "#" } 
        } 
       }, 
       { 
        "data" : "sss node", 
        "attr" : { "id" : "3" }, 
        "children" : [ 
         { 
          "data" : "bbb node" 
         } 
         , 
         { 
          "data" : "kkkk node", 
          "attr" : { "id" : "11" }, 
          "children" : [ 
           { 
            "data" : "oooo node", 
            "children" : [ "pppp", "nnnn" ] 
           } 
          ] 
         }, 
        ] 
       }, 
       { 
        "data" : "wwqq node", 
        "attr" : { "id" : "4" }, 
        "children" : [ "Child 1", "Child 2" ] 
       }, 
       { 
        "data" : "hhh node", 
        "attr" : { "id" : "5" }, 
        "metadata ":"i am the metadata", 
        "children" : [ 
          { 
          "data" : "A node", 
          "children" : [ 
           { 
            "data" : "ttt node", 
            "children" : [ "Child 1", "Child 2" ] 
           } 
           ] 
          }, 
          { 
          "data" : "bbb node" 
          } 

         ] 
       }, 
      ] 
     }, 
     /* 
     "sort":function (a, b) { 
      return this.get_text(a) < this.get_text(b) ? 1 : -1; 
      }, 
     ////*/ 
     "contextmenu":{ 
       "show_at_node":false, 
       "items":{ 
         //"ccp":false, 
         "sort" : { 
          // The item label 
          "label"    : "sort", 
          /* The function to execute upon a click 
          "action"   : function (obj) { 
                var fn=function (a, b) {return this.get_text(a) < this.get_text(b) ? 1 : -1;} 
                this.changeSort(obj,fn); 

                }, 
          //*/ 
          // All below are optional 
          "_disabled"   : false,  // clicking the item won't do a thing 
          "_class"   : "sort", // class is applied to the item LI node 
          "separator_before" : false, // Insert a separator before the item 
          "separator_after" : true,  // Insert a separator after the item 
          // false or string - if does not contain `/` - used as classname 
          "icon"    : false, 
          "submenu"   : { 
           "name":{ 
             "label" : "name", 
             "action": function (obj) { 
                 var fn=function (a, b) {return this.get_text(a) < this.get_text(b) ? 1 : -1;} 
                 this.changeSort(obj,fn); 
                } 
            }, 
           "time":{ 
             "label" : "time", 
             "action": function (obj) { 
                 var fn=function (a, b) {return this.get_text(a) < this.get_text(b) ? 1 : -1;} 
                 this.changeSort(obj,fn); 

                } 
            } 
           } 
         }, 
         "icons":{ 
          "label"    : "icons", 
          "action":function(obj){window.a=obj;}, 
          "submenu"   : { 
           "apple":{ 
             "label" : "apple", 
             "action": function (obj) { 
                 this.set_theme('apple'); 
                } 
            }, 
           "classic":{ 
             "label" : "classic", 
             "action": function (obj) { 
                 this.set_theme('classic'); 
                } 
            }, 
           "default":{ 
             "label" : "default", 
             "action": function (obj) { 
                 this.set_theme('default'); 
                } 
            } 
           } 

         } 
      } 
     }, 
     "core" : { "initially_open" : [ ] }, 
     "plugins" : [ "themes", "json_data","crrm","ui","contextmenu","search","sort" ] 
    }) 
    .bind("search.jstree", function (e, data) { 
      alert("Found " + data.rslt.nodes.length + " nodes matching '" + data.rslt.str + "'."); 
     }); 

puedo configurar los metadatos:

"metadata ":"i am the metadata", 

y quiero conseguirlo cuando haga clic derecho, en el "menú contextual":

"icons":{ 
          "label"    : "icons", 
          "action":function(obj){console.log(this.data);}, 

I muestre esto.data siga esto article:

// the `metadata` property will be saved using the jQuery `data` function on the `li` node 
    metadata : "a string, array, object, etc", 

pero no puedo obtenerlo, ¿qué puedo hacer?

Answer 1

JsTree almacena metadatos con jQuery:

.data("jstree", "a string, array, object, etc") 

Para acceder a este uso de metadatos:

.data("jstree") 

Por ejemplo, una vez que pase algún DateTime objeto en formato JSON:

metadata : { lastModified : "/Date(1283198400000)/" } 

Acceda a él:

$.jstree 
.bind("select_node.jstree", function (event, data) { 
    alert(formatJsonDateTime(data.rslt.obj.data("jstree").lastModified)); 
}); 

function formatJsonDateTime(jsonDate) { 
    var date = eval(jsonDate.replace(/\/Date\((\d+)\)\//gi, "new Date($1)")); 
    return date.format("M/dd/yyyy HH:mm"); 
}; 

Answer 2

La respuesta aceptada no funciona con la última versión de jsTree. Aquí hay un ejemplo actualizado que se basa en el anterior.

metadata : { lastModified : "/Date(1283198400000)/" } 

acceder a los datos:

$.jstree 
.bind("select_node.jstree", function (event, data) { 
    alert(data.rslt.obj.data("lastModified")); 
}); 

Answer 3

Ninguna de estas soluciones trabajó para mí. Lo que hizo es la siguiente:

alert(data.rslt.obj.data()[0].lastModified) 

Gracias

Answer 4

estoy trabajando con jstree 1,0-RC3, de fecha 2011-02-09. Antes que nada, encontré que asignar una cadena a metadatos como este "metadata ":"i am the metadata" no funcionó. Tenía que ser un objeto JSON. Mi árbol representa una estructura de directorio que comienza en la carpeta raíz "ejercicios", por lo que quiero que cada nodo almacene la ruta en el servidor donde está almacenada la estructura del directorio. El servidor envía datos JSON (simplificadas para mayor claridad) como esto:

[ 
    { 
     "data":"Book1", 
     "metadata":{"path":"exercises\/Book1"}, 
    }, 
    { 
     "data":"vocabulary", 
     "metadata":{"path":"exercises\/vocabulary"} 
    } 
] 

uso el valor de ruta de los metadatos para construir la URL correcta para la petición AJAX enviado al abrir una carpeta que contiene otras carpetas o archivos . La propiedad url de la propiedad ajax utilizado para configurar la estructura se parece a esto:

"url": function (node) { 
    var path = "", 
    url = "/tree_service/tree/format/json?path="; 
    if(node === -1){ 
     url += "exercises"; 
    } 
    else{ 
     path = encodeURIComponent(node.data().path); 
     url += path; 
    } 
    return url; 
} 

como fue prometido por la documentación, podemos utilizar los datos() función en el nodo pasa a la función URL y al acecho en el objeto devuelto es la propiedad de ruta.

Answer 5

puede obtener el nodo completo mediante el uso de la función get_node de jstree como

var node = $(container).jstree().get_node("node_id");

entonces se puede acceder a los datos de

node.original.metadata