Web开发使用jsTree实例
[html]
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsTree v.1.0 - full featured demo</title>
<script type="text/javascript" src="../_lib/jquery.js"></script>
<script type="text/javascript" src="../_lib/jquery.cookie.js"></script>
<script type="text/javascript" src="../_lib/jquery.hotkeys.js"></script>
<script type="text/javascript" src="../jquery.jstree.js"></script>
<style type="text/css">
html, body { margin:0; padding:0; }
body, td, th, pre, code, select, option, input, textarea { font-family:verdana,arial,sans-serif; font-size:10px; }
.demo, .demo input, .jstree-dnd-helper, #vakata-contextmenu { font-size:10px; font-family:Verdana; }
#container { width:780px; margin:10px auto; overflow:hidden; position:relative; }
#demo { width:auto; height:400px; overflow:auto; border:1px solid gray; }
#text { margin-top:1px; }
.cao a{color:#999!important;}
</style>
</head>
<body>
<div id="container">
<div id="mmenu" style="height:30px; overflow:auto;">
<input type="button" id="add_folder" value="add folder" style="display:block; float:left;"/>
<input type="button" id="rename" value="rename" style="display:block; float:left;"/>
<input type="button" id="remove" value="remove" style="display:block; float:left;"/>
</div>
<!-- the tree container (notice NOT an UL node) -->
<div id="demo" class="demo"></div>
<!-- JavaScript neccessary for the tree -->
<script type="text/javascript">
//window.onbeforeunload=function(){
//离开页面的时候删除
window.onunload=function(){
$.get('./server.php?operation=check');
}
//添加的函数
function redirect(id)
{
//alert(id);
}
//回调函数，可以在这里任意修改或则添加li上的时间以及属性
function _callBack(d){
var re = [], expIds = [], attr = {},clas='';
$.each(d,function(i){
var id =d[i].attr.id;
if(id=='node_16')
{
clas='cao'
}
//$('.jstree a').css('color','red');
var onclick = "redirect('"+id.replace('node_','')+"')";
re.push({
"attr" : {
"id": id ,
"rel":d[i].attr.rel,
"onClick" : onclick,//添加事件
"class" :clas//添加属性
},
"data" :[
d[i].data
],
"state" :[
d[i].state
]
});
});
return re;
}
$(function () {
// Settings up the tree - using $(selector).jstree(options);
// All those configuration options are documented in the _docs folder
$("#demo")
.bind("loaded.jstree", function (e, data) {
data.inst.open_all(-1); // -1默认全部展开节点
})
.jstree({
// the list of plugins to include
"plugins" : [ "themes", "json_data", "ui", "crrm", "cookies", "dnd", "search", "types", "hotkeys", "contextmenu","core" ],
// 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" : "./server.php",
// 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 {
"operation" : "get_children",
"id" : n.attr ? n.attr("id").replace("node_","") : 1
};
},
"success":function(d)//回调函数
{
return _callBack(d);
}
}
},
// 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
"defau
补充：Web开发 , 其他 ,
