如何获取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",
并且当我右键单击“contextmenu”时想要得到它:
"icons":{ "label" : "icons", "action":function(obj){console.log(this.data);},
我显示this.data跟随这篇文章 :
// the `metadata` property will be saved using the jQuery `data` function on the `li` node metadata : "a string, array, object, etc",
但我无法得到它,我该怎么办?
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"); };
接受的答案不适用于最新版本的jsTree。 这是一个基于前一个的更新示例。
metadata : { lastModified : "/Date(1283198400000)/" }
访问数据:
$.jstree .bind("select_node.jstree", function (event, data) { alert( data.rslt.obj.data("lastModified") ); });
您可以使用jstree中的get_node函数来获取完整节点
var node = $(container).jstree().get_node("node_id");
然后你可以从中访问数据
node.original.metadata
这些解决方案都不适合我。 做了以下事情:
alert(data.rslt.obj.data()[0].lastModified)
谢谢
我正在使用jstree 1.0-rc3,日期为2011-02-09。 首先,我发现将字符串分配给元数据就像这个"metadata ":"i am the metadata"
不起作用。 它必须是一个JSON对象。 我的树表示从根文件夹“exercise”开始的目录结构,所以我希望每个节点在存储目录结构的服务器上存储路径。 服务器发送JSON数据(为简洁起见而简化),如下所示:
[ { "data":"Book1", "metadata":{"path":"exercises\/Book1"}, }, { "data":"vocabulary", "metadata":{"path":"exercises\/vocabulary"} } ]
我使用元数据中的路径值为您打开包含其他文件夹或文件的文件夹时发送的AJAX请求构建正确的URL。 用于配置树的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函数的节点上的data()函数和潜伏在返回的对象中的path属性。