(本来是不想分成上、下两篇来写的，不过sina对博文字数有要求，不小心写超长了，只得拆分。)
这是一个树形菜单的展示。其功能及其强大，几乎可以提供你对树结构的各种要求。下面，对其简述。
首先，感谢 IvanBozhanov利用JQuery对该组件的开发。同时还要感谢我的技术总监Mr. Lu和网友“漂流瓶”的帮助。
组件目前更新至v0.9.8 版本，当然，版本还会继续升级，作者试图将它变得更加强大和完美，Ivan Bozhanov在博客中说：“I justthought it would be nice if I posted all my ideas for the upcoming0.9.9 and see which ones you like, or do not like.”
使用JSTree，需要在文件头写类似如下内容的代码，也就是说，它基于JQuery技术，自然需要jquery.js文件支持，同时还有css.js和tree_component.js这2个文件做支持以及tree_comopnent.css文件的渲染。
<scriptsrc="<%=request.getContextPath()%>/js/jquery-0.9.6.js"type="text/javascript"></script>
<scriptsrc="<%=request.getContextPath()%>/js/css.js"type="text/javascript"></script>
<scripttype="text/javascript"src="<%=request.getContextPath()%>/js/tree_component.js"></script>
<linkrel="stylesheet" href="<%=request.getContextPath()%>/css/tree_component.css"/>
这个树，我们需要给它提供一个容器，如div。
容器内不需要给出内容，<divid="divForTree"></div>即可。内容会在JSTree被Init的时候来渲染。
PARTA.
来看一个普通的树：
$(function () {
$.ajaxSetup({cache:false});//这个是为了树的准确性做的一个缓存区清理的工作
$("#divForTree").tree({//从这里开始初始化JSTree
data :{
type :"json",//支持如xml等多种类型，这里是获取JSON格式数据源
url :src,//每次获得数据从这个链接
async :true,//动态加载数据
async_data : function (NODE){//请求数据时带的参数列表，可通过getParameter获得。
return { parent_Id : $(NODE).attr("id")|| 0}
}
},
lang:{
loading:"目录加载中……" //在用户等待数据渲染的时候给出的提示内容，默认为loading
},
ui:{//在这个option中设置context来控制JSTree的右键操作，如果在context的visible函数内始终返回false则表示在任何节点的右键都无效。
context:{visible :function (NODE, TREE_OBJ) {
return false;
}}
},
callback :{//响应函数，如节点被选中的onselect，还有onopen,onload,beforeopen等很多可定义内容。
onselect: function(node){
//自定义操作
}
}
});
});
再看一下JSON的数据吧，可以在后台JAVA程序段获得一个根据实际情况如当前打开节点的ID作为parent_id获取它的子节点List。然后在一个JSP中迭代这个List（这里的迭代利用了Struts2的标签）：
<%@ pagecontentType="text/html; charset=utf-8"%>
<%@ taglibprefix="s" uri="/struts-tags" %>
[
<s:iterator value="noteslist" >
{
attributes: { id : ${id} },
data: "${name}" ,state: "closed"
}
,
</s:iterator>
]
PARTB.
现在看一个带有右键操作的树形菜单。
$(document).ready(function(){
$.ajaxSetup({cache:false});
$("#browser").tree({
data : {
type : "json",
url : src,
async :true,
async_data :function (NODE) {
return {parent_Id : $(NODE).attr("id") || 0}
}
},
lang:{
loading:"目录加载中……"
},
rules:
{
draggable :"all" //这个设置可以使得节点进行拖动操作
},
ui:{
context : [ //自定义右键操作的可操作内容
{
id : "create",
label : "添加下级目录",//右键弹出菜单的此项操作屏显字样
visible : function (NODE,TREE_OBJ) { if(NODE.length != 1) return false; returnTREE_OBJ.check("creatable", NODE); }, //允许节点被右击时出现操作菜单
icon : "<%=request.getContextPath()%>/css/themes/default/create.png",//右键弹出菜单的此项操作图标
action :function (NODE, TREE_OBJ) {
//进行此项操作，将有这个函数事件被响应
}
},
"separator"//这个是在两个操作之间画一条分隔线
,
{
id : "edit",
label :"编辑目录信息",
visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) returnfalse; return TREE_OBJ.check("creatable", NODE);},
icon :"<%=request.getContextPath()%>/image/reg2.gif",
action : function (NODE, TREE_OBJ){
openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"));});
}
},
"separator"
,
{
id : "privilege",
label :"设置目录权限",
visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) returnfalse; return TREE_OBJ.check("creatable", NODE);},
icon :"<%=request.getContextPath()%>/css/themes/default/rename.png",
action : function (NODE, TREE_OBJ){
openWindow('myurl','','',function(){treeRefresh($(NODE).attr("id"));});
}
},
"separator",
{
id : "delete",
label : "删除",
visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) returnfalse; return TREE_OBJ.check("creatable", NODE);},
icon :"<%=request.getContextPath()%>/css/themes/default/remove.png",
action : function (NODE, TREE_OBJ){
vartree=$.tree_reference("browser");
openWindow('myurl','','',function(){
//下边的.parent()和.refresh()均为v0.9.8版本提供，如果你使用的是其他版本如v0.9.6等，这些将不被支持。
NODE=$(tree.parent(NODE));
if($(NODE).attr("id")==undefined){
tree.refresh();
}else{
TreeRefresh();
}
});
}
},
"separator",
{
id : "others",
label :"其他操作",
visible : function (NODE, TREE_OBJ) { if(NODE.length != 1) returnfalse; return TREE_OBJ.check("creatable", NODE);},
icon :"<%=request.getContextPath()%>/css/images/cut.png",
action : function (NODE, TREE_OBJ){
alert("暂无可提供操作。");
}
}
]
},
callback : {
onselect: function(node) {
//(a);
}
}
});
functiontreeRefresh(nodeid){
varrid=nodeid;
vartree=$.tree_reference("browser");
varpar_node=tree.parent($("#"+rid));
tree.refresh(par_node);
}
});
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
