This is my 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 set the metadata:
"metadata ":"i am the metadata",
and want to get it when i right click,on the "contextmenu" :
"icons":{
"label" : "icons",
"action":function(obj){console.log(this.data);},
I show this.data follow this article:
// the `metadata` property will be saved using the jQuery `data` function on the `li` node
metadata : "a string, array, object, etc",
but I can't get it, what can I do?
JsTree stores metadata with jQuery:
.data("jstree", "a string, array, object, etc")
To access this metadata use:
.data("jstree")
For example, once you pass some DateTime object in json format:
metadata : { lastModified : "/Date(1283198400000)/" }
Access it:
$.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");
};
The accepted answer does not work with the latest version of jsTree. Here's an updated example building upon the previous.
metadata : { lastModified : "/Date(1283198400000)/" }
Access the data:
$.jstree
.bind("select_node.jstree", function (event, data) {
alert( data.rslt.obj.data("lastModified") );
});
you can get the full node by using get_node function from jstree like
var node = $(container).jstree().get_node("node_id");
then you can access the data from
node.original.metadata
None of those solutions worked for me. What did is the following:
alert(data.rslt.obj.data()[0].lastModified)
Thanks
I'm working with jstree 1.0-rc3, dated 2011-02-09. First of all, I found that assigning a string to metadata like this "metadata ":"i am the metadata" didn't work. It had to be a JSON object. My tree is representing a directory structure starting from the root folder "exercises" so I want each node to store the path on the server where the directory structure is stored. The server sends out JSON data (simplified for clarity) like this:
[
{
"data":"Book1",
"metadata":{"path":"exercises\/Book1"},
},
{
"data":"vocabulary",
"metadata":{"path":"exercises\/vocabulary"}
}
]
I use the path value from the metadata to build the correct URL for the AJAX request sent when you open a folder that contains other folders or files. The url property of the ajax property used to configure the tree looks like this:
"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;
}
As promised by the documentation, we can use the data() function on the node passed to the url function and lurking in the object returned is the path property.
来源：https://stackoverflow.com/questions/3604790/how-to-get-the-metadata-of-jstree