comment obtenir les métadonnées de jsTree.

Question

Ceci est mon 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 mis les métadonnées:

"metadata ":"i am the metadata", 

et que vous voulez l'obtenir quand je clique droit, sur le "contextmenu":

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

I show this.data suivez ceci article:

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

mais je ne peux pas l'obtenir, que puis-je faire?

Answer 1

JsTree stocke les métadonnées avec jQuery:

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

Pour accéder à cette utilisation des métadonnées:

.data("jstree") 

Par exemple, une fois que vous passez un objet DateTime au format JSON:

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

Accès:

$.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 réponse acceptée ne fonctionne pas avec la dernière version de jsTree. Voici un exemple mis à jour basé sur le précédent.

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

accès aux données:

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

Answer 3

Aucune de ces solutions a fonctionné pour moi. Qu'est-ce que est le suivant:

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

Merci

Answer 4

Je travaille avec jstree 1.0 RC3, en date du 2011-02-09. Tout d'abord, j'ai trouvé que l'attribution d'une chaîne aux métadonnées comme ceci "metadata ":"i am the metadata" ne fonctionnait pas. Ce devait être un objet JSON. Mon arborescence représente une structure de répertoires à partir du dossier racine "exercices". Je souhaite donc que chaque nœud stocke le chemin sur le serveur où la structure de répertoires est stockée. Le serveur envoie des données JSON (simplifiées pour plus de clarté) comme ceci:

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

J'utilise la valeur du chemin à partir des métadonnées pour construire l'URL correcte pour la requête AJAX envoyé lorsque vous ouvrez un dossier qui contient d'autres dossiers ou fichiers . La propriété url de la propriété ajax utilisé pour configurer l'arbre ressemble à ceci:

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

Comme promis par la documentation, nous pouvons utiliser la fonction des données() sur le noeud est passé à la fonction URL et qui se cache dans l'objet retourné est la propriété path.

Answer 5

vous pouvez obtenir le nœud complet en utilisant la fonction get_node de jstree comme

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

vous pouvez accéder aux données de

node.original.metadata