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