ztree
一、概述
官网介绍说，zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。zTree 是开源免费的软件（MIT 许可证）。官网可以下载。
二、ztree插件的使用
将下载的软件包解压，放到webapp的js目录下。在jsp页面引入css和js。
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>两种方式构造ztree。
1. 使用标准json数据构造ztree
<div title="面板3">
<ul id="ztree1" class="ztree">
</ul>
<script type="text/javascript">
$(function(){
var setting = {};
var zNodes = [
{"name":"节点1","children":[
{"name":"节点11"},
{"name":"节点12"}
]},
{"name":"节点2"},
{"name":"节点3"}
];
$.fn.zTree.init($("#ztree1"), setting, zNodes);
});
</script>
</div>2. 使用简单json数据构造ztree
<div title="面板4">
<ul id="ztree2" class="ztree">
</ul>
<script type="text/javascript">
$(function(){
var setting = {
data: {
simpleData: {
enable: true
}
}
};
var zNodes = [
{id:1,pId:0,"name":"节点1"},
{id:2,pId:1,"name":"节点2"},
{id:3,pId:2,"name":"节点3"}
];
$.fn.zTree.init($("#ztree2"), setting, zNodes);
});
</script>
</div>3. 发送ajax请求获取json数据构造ztree
<div title="面板5">
<ul id="ztree3" class="ztree">
</ul>
<script type="text/javascript">
$(function(){
var setting3 = {
data: {
simpleData: {
enable: true
}
}
};
var url = "${pageContext.request.contextPath }/json/menu.json";
$.post(url,{},function(data){
$.fn.zTree.init($("#ztree3"), setting3, data);
},'json');
});
</script>
</div>4. ztree节点绑定事件动态添加选项卡
<div title="面板5">
<ul id="ztree3" class="ztree">
</ul>
<script type="text/javascript">
$(function(){
var setting3 = {
data: {
simpleData: {
enable: true
}
},
callback: {
onClick: function(event, treeId, treeNode){
if(treeNode.page != undefined){
if($("#center_tab").tabs("exists",treeNode.name)){
$("#center_tab").tabs("select",treeNode.name)
}else{
$("#center_tab").tabs("add",{
title:treeNode.name,
closable:true,
content:'<iframe height="100%" width="100%" frameborder="0" src='+treeNode.page+'></iframe>'
});
}
}
}
}
};
var url = "${pageContext.request.contextPath }/json/menu.json";
$.post(url,{},function(data){
$.fn.zTree.init($("#ztree3"), setting3, data);
},'json');
});
</script>
</div>