52,797
社区成员
发帖
与我相关
我的任务
分享
$("#demo")
.jstree({
// the list of plugins to include
"plugins" : [ "themes", "json_data", "ui", "crrm", "cookies", "dnd", "search", "types", "hotkeys", "checkbox" ],
// Plugin configuration
// I usually configure the plugin that handles the data first - in this case JSON as it is most common
"json_data" : {
// I chose an ajax enabled tree - again - as this is most common, and maybe a bit more complex
// All the options are the same as jQuery's except for `data` which CAN (not should) be a function
"ajax" : {
// the URL to fetch the data
"url" : "organization_getEmployeeChildrenNodes.action?employeeIds="+employeeIds,
// this function is executed in the instance's scope (this refers to the tree instance)
// the parameter is the node being loaded (may be -1, 0, or undefined when loading the root nodes)
"data" : function (n) {
// the result is fed to the AJAX request `data` option
return {
"parentId" : n.attr ? n.attr("id") : ""
};
}
}
},
// Configuring the search plugin
"search" : {
// As this has been a common question - async search
// Same as above - the `ajax` config option is actually jQuery's object (only `data` can be a function)
"ajax" : {
"url" : "EAP3.0/collegebuild/organization_getChildrenNodes.action",
// You get the search string as a parameter
"data" : function (str) {
return {
"search_str" : str
};
}
}
},
// Using types - most of the time this is an overkill
// Still meny people use them - here is how
"types" : {
// I set both options to -2, as I do not need depth and children count checking
// Those two checks may slow jstree a lot, so use only when needed
"max_depth" : -2,
"max_children" : -2,
// I want only `drive` nodes to be root nodes
// This will prevent moving or creating any other type as a root node
"valid_children" : [ "drive" ],
"types" : {
// The default type
"default" : {
// I want this type to have no children (so only leaf nodes)
// In my case - those are files
"valid_children" : "none",
// If we specify an icon for the default type it WILL OVERRIDE the theme icons
"icon" : {
"image" : "../skin/images/jsTreeImages/file.png"
}
},
// The `folder` type
"folder" : {
// can have files and other folders inside of it, but NOT `drive` nodes
"valid_children" : [ "default", "folder" ],
"icon" : {
"image" : "../skin/images/jsTreeImages/folder.png"
}
},
// The `drive` nodes
"drive" : {
// can have files and folders inside, but NOT other `drive` nodes
"valid_children" : [ "default", "folder" ],
"icon" : {
"image" : "../skin/images/jsTreeImages/root.png"
},
// those options prevent the functions with the same name to be used on the `drive` type nodes
// internally the `before` event is used
"start_drag" : false,
"move_node" : false,
"delete_node" : false,
"remove" : false
}
}
},
// For UI & core - the nodes to initially select and open will be overwritten by the cookie plugin
// the UI plugin - it handles selecting/deselecting/hovering nodes
"ui" : {
// this makes the node with ID node_4 selected onload
"initially_select" : [ "node_4" ]
},
// the core plugin - not many options here
"core" : {
// just open those two nodes up
// as this is an AJAX enabled tree, both will be downloaded from the server
"initially_open" : [ "node_2" , "node_3" ]
}
})
.bind("click.jstree",function (event) {
var id=event.target.parentNode.id ;
alert(id);
})
;