come ottenere i metadati di jsTree.

Question

Questo è il mio codice:

$("#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 + "'."); 
     }); 

ho impostato i metadati:

"metadata ":"i am the metadata", 

e voglio farlo quando mi fate clic destro, sul "menu contestuale":

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

I show this.data segui questo article:

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

ma non riesco a capirlo, cosa posso fare?

Answer 1

JsTree negozi metadati con jQuery:

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

Per accedere a questa uso di metadati:

.data("jstree") 

Ad esempio, una volta che si passa un po 'di DateTime oggetto in formato JSON:

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

Accedilo:

$.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 risposta accettata non funziona con l'ultima versione di jsTree. Ecco un esempio aggiornato basato sul precedente.

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

accedere ai dati:

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

Answer 3

Nessuna di queste soluzioni ha lavorato per me. Che cosa è la seguente:

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

Grazie

Answer 4

sto lavorando con jstree 1.0-RC3, datata 2011-02-09. Prima di tutto, ho scoperto che l'assegnazione di una stringa a metadati come questa "metadata ":"i am the metadata" non funzionava. Doveva essere un oggetto JSON. Il mio albero rappresenta una struttura di directory che inizia dalla cartella principale "esercizi", quindi voglio che ogni nodo memorizzi il percorso sul server in cui è archiviata la struttura della directory. Il server invia i dati JSON (semplificato per chiarezza) come questo:

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

Io uso il valore del percorso dai metadati per costruire l'URL corretto per la richiesta AJAX inviato quando si apre una cartella contenente altre cartelle o file . La proprietà url della proprietà ajax utilizzato per configurare l'albero assomiglia a questo:

"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; 
} 

Come promesso dalla documentazione, siamo in grado di utilizzare i dati() la funzione sul nodo passato alla funzione URL e in agguato nell'oggetto restituito è la proprietà del percorso.

Answer 5

è possibile ottenere il nodo completa utilizzando la funzione get_node da jstree come

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

allora si può accedere ai dati da

node.original.metadata