Wie bekomme ich die Metadaten von jsTree?

Question

Dies ist mein Code:

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

i die Metadaten gesetzt:

"metadata ":"i am the metadata", 

und wollen es erhalten, wenn ich mit der rechten klicken Sie auf den "contextmenu":

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

I zeigen Sie dieses.data folgen Sie diesem article:

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

aber ich kann es nicht bekommen, was kann ich tun?

Answer 1

JsTree speichert Metadaten mit jQuery:

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

Um diese Metadaten verwenden, um Zugriff:

.data("jstree") 

Zum Beispiel, wenn Sie passieren einige DateTime Objekt im JSON-Format:

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

Zugriff darauf:

$.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

Die angenommene Antwort funktioniert nicht mit der neuesten Version von jsTree. Hier ist ein aktualisiertes Beispiel, das auf dem vorherigen aufbaut.

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

Zugriff auf die Daten:

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

Answer 3

Keine dieser Lösungen für mich gearbeitet. Was tat, ist der folgende:

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

Dank

Answer 4

Ich arbeite mit jstree 1.0-RC3, 2011-02-09 datiert. Zuerst fand ich, dass das Zuweisen einer Zeichenfolge zu Metadaten wie dieser "metadata ":"i am the metadata" nicht funktionierte. Es musste ein JSON-Objekt sein. Mein Baum stellt eine Verzeichnisstruktur dar, beginnend mit dem Stammordner "Übungen". Ich möchte also, dass jeder Knoten den Pfad auf dem Server speichert, auf dem die Verzeichnisstruktur gespeichert ist. Der Server sendet JSON-Daten (aus Gründen der Klarheit vereinfacht) wie folgt aus:

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

ich den Pfad Wert aus den Metadaten verwenden, um die richtige URL für die AJAX-Request geschickt zu bauen, wenn Sie einen Ordner öffnen, die andere Ordner oder Dateien enthält, . Die URL-Eigenschaft der Ajax-Eigenschaft verwendet, um den Baum zu konfigurieren sieht wie folgt aus:

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

Wie die Dokumentation versprochen, wir die Daten verwenden können() Funktion auf dem Knoten auf die URL-Funktion übergeben und in das Objekt lauert returned ist die Pfadeigenschaft.

Answer 5

Sie den vollständigen Knoten unter Verwendung get_node Funktion von jstree wie

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

dann können Sie auf die Daten zugreifen bekommen von

node.original.metadata