如何獲取jsTree的元數據。

這是我的代碼：如何獲取jsTree的元數據。

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

我的元數據集：

"metadata ":"i am the metadata",

，並希望得到它，當我點擊右鍵，在「文本菜單」：

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

我顯示此數據關注這個article：

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

但我無法得到它，我該怎麼辦？

來源

2010-08-30 zjm1126

訪問數據請考慮接受的答案移動到http： //stackoverflow.com/a/7731120/466771當前最好的答案是不正確的（任何更多）。 – olafure 2012-05-15 20:06:50

JsTree將元數據存儲使用jQuery：

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

要訪問該元數據應用：

.data("jstree")

例如，一旦你通過JSON格式的一些DateTime對象：

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

訪問它：

$.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"); 
};

來源

2010-09-24 19:59:54

謝謝SOOO多！ – 2011-01-12 02:32:36

這不再適用。也許它確實，但不是最新的版本。這工作：http://stackoverflow.com/a/7731120/466771 – olafure 2012-05-15 20:07:25

接受的答案不適用於最新版本的jsTree。這裏有一個更新的示例。

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

訪問數據：

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

來源

2011-10-11 19:03:23 justind

無法讀取'undefined'的屬性'obj' – mmcrae 2015-10-05 18:10:54

這些解決方案都沒有爲我工作。什麼做的是以下幾點：

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

感謝

來源

2012-07-17 00:14:07

我與jstree 1.0 RC3工作，日2011-02-09。首先，我發現將字符串分配給像這樣的元數據"metadata ":"i am the metadata"不起作用。它必須是一個JSON對象。我的樹代表從根文件夾「Exercises」開始的目錄結構，因此我希望每個節點都將路徑存儲在存儲目錄結構的服務器上。該服務器發送JSON數據（簡化爲清楚起見）是這樣的：

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

我使用路徑值從元數據來構建正確的網址，當您打開包含其他文件夾或文件的文件夾發送AJAX請求。用於配置樹中的AJAX屬性的url屬性看起來是這樣的：

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

如所承諾的文件，我們可以使用數據（）函數傳遞到URL功能和潛伏在對象的節點上返回的是路徑屬性。

來源

2012-10-07 00:20:38 DavidHyogo

您可以通過使用get_node功能從jstree得到充分的節點像

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

那麼你可以從

node.original.metadata

來源

2014-03-25 20:12:17

如何獲取jsTree的元數據。

回答

相關問題