JQuery ZTree使用方法详解
JQueryZTree简单使用
@(JavaScript)[jQuery,ztree,入门]
基本概述
zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。专门适合项目开发，尤其是树状菜单、树状数据的Web显示、权限管理等等。
zTree是开源免费的软件（MIT许可证）。在开源的作用下，zTree越来越完善，目前已经拥有了不少粉丝，并且今后还会推出更多的zTree扩展功能库，让zTree更加强大。 ——参考《百度百科》
官网：zTree官网
PS：zTree的官方API文档和demo挺详细的，值得一读。
案例
使用标准json数据构造ztree
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>ztree测试</title>
<linkrel="stylesheet"type="text/css"href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
<linkrel="stylesheet"type="text/css"href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
<scripttype="text/javascript"src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<scripttype="text/javascript"src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
<linkrel="stylesheet"href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css"type="text/css">
<scripttype="text/javascript"src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>
<scripttype="text/javascript">
$(function(){
$("#btn").click(function(){
varisExists=$("#et").tabs("exists","标题");
if(isExists){
$("#et").tabs("select","标题");
}else{
$("#et").tabs("add",{
title:"标题",
closable:true,
iconCls:"icon-save",
content:"<iframeframeborder='no'height='100%'width='100%'src='3-tabs.jsp'></iframe>"
});
}
});
});
</script>
<!--使用标准json数据构造ztree-->
<scripttype="text/javascript">
$(function(){
varsetting={};
varzNodes=[
{name:'结点1',children:[
{name:'结点11'},
{name:'结点12'}
]},
{name:'结点2'},
{name:'结点3'}
];
$.fn.zTree.init($("#ztree1"),setting,zNodes);
});
</script>
</head>
<bodyclass="easyui-layout">
<!--分为五个区域-->
<divstyle="height:100px;"data-options="region:'north'">北部区域</div>
<divstyle="width:200px;"data-options="region:'west'">
<divclass="easyui-accordion"data-options="fit:true">
<divdata-options="iconCls:'icon-save'"title="系统菜单">
<aid="btn"class="easyui-linkbutton">按钮</a>
</div>
<divdata-options="iconCls:'icon-remove'"title="业务菜单">
<ulid="ztree1"class="ztree"></ul>
</div>
<divdata-options="iconCls:'icon-remove'"title="功能菜单">内容3</div>
<divdata-options="iconCls:'icon-remove'"title="非功能菜单">内容4</div>
</div>
</div>
<divstyle=""data-options="region:'center'">
<divid="et"class="easyui-tabs"data-options="fit:true">
<divdata-options="iconCls:'icon-save',closable:true"title="系统菜单">内容1</div>
<divdata-options="iconCls:'icon-remove'"title="业务菜单">内容2</div>
</div>
</div>
<divstyle="width:100px;"data-options="region:'east'">东部区域</div>
<divstyle="height:50px;"data-options="region:'south'">南部区域</div>
</body>
</html>
使用简单json数据构造ztree
<divdata-options="iconCls:'icon-remove'"title="功能菜单">
<ulid="ztree2"class="ztree"></ul>
</div>
<!--使用简单json数据构造ztree-->
<scripttype="text/javascript">
$(function(){
varsetting={
data:{
simpleData:{
enable:true
}
}
};
varzNodes=[
{"id":1,"pId":0,"name":"test1"},
{"id":11,"pId":1,"name":"test11"},
{"id":12,"pId":1,"name":"test12"},
{"id":111,"pId":11,"name":"test111"},
{"id":2,"pId":0,"name":"test2"},
{"id":3,"pId":0,"name":"test3"},
{"id":31,"pId":2,"name":"test31"}
];
$.fn.zTree.init($("#ztree2"),setting,zNodes);
});
</script>
发送ajax请求获取动态json数据构造ztree
json内容
[
{"id":"11","pId":"0","name":"菜单1"},
{"id":"111","pId":"11","name":"菜单11","page":"xx.action"},
{"id":"112","pId":"11","name":"菜单12","page":"xx.action"},
{"id":"113","pId":"11","name":"菜单13","page":"xx.action"},
{"id":"114","pId":"11","name":"菜单14","page":"xx.action"},
{"id":"12","pId":"0","name":"菜单2"},
{"id":"121","pId":"12","name":"菜单21","page":"xx.action"},
{"id":"122","pId":"12","name":"菜单22","page":"xx.action"},
{"id":"123","pId":"12","name":"菜单23","page":"xx.action"},
{"id":"13","pId":"0","name":"菜单3"},
{"id":"131","pId":"13","name":"菜单31","page":"xx.action"},
{"id":"132","pId":"13","name":"菜单32","page":"xx.action"}
]
html片段
<divdata-options="iconCls:'icon-remove'"title="非功能菜单">
<ulid="ztree3"class="ztree"></ul>
</div>
<!--发送ajax请求获取动态json数据构造ztree-->
<scripttype="text/javascript">
$(function(){
varsetting={
data:{
simpleData:{
enable:true
}
}
};
$.ajax({
url:'${pageContext.request.contextPath}/json/menu.json',
type:'get',
data:'',
dataType:'json',
success:function(data){
$.fn.zTree.init($("#ztree3"),setting,data);
}
});
});
</script>
为ztree节点绑定事件动态添加选项卡
json内容
[
{"id":"11","pId":"0","name":"菜单1"},
{"id":"111","pId":"11","name":"菜单11","page":"xx.action"},
{"id":"112","pId":"11","name":"菜单12","page":"xx.action"},
{"id":"113","pId":"11","name":"菜单13","page":"xx.action"},
{"id":"114","pId":"11","name":"菜单14","page":"xx.action"},
{"id":"12","pId":"0","name":"菜单2"},
{"id":"121","pId":"12","name":"菜单21","page":"xx.action"},
{"id":"122","pId":"12","name":"菜单22","page":"xx.action"},
{"id":"123","pId":"12","name":"菜单23","page":"xx.action"},
{"id":"13","pId":"0","name":"菜单3"},
{"id":"131","pId":"13","name":"菜单31","page":"xx.action"},
{"id":"132","pId":"13","name":"菜单32","page":"xx.action"}
]
html文件
<divdata-options="iconCls:'icon-save'"title="ztree事件">
<ulid="ztree4"class="ztree"></ul>
</div>
<!--为ztree节点绑定事件动态添加选项卡-->
<scripttype="text/javascript">
$(function(){
varsetting={
data:{
simpleData:{
enable:true
}
},
callback:{
onClick:function(event,treeId,treeNode){
if(treeNode.page!=undefined){
varisExists=$("#et").tabs("exists",treeNode.name);
if(isExists){
$("#et").tabs("select",treeNode.name);
}else{
$("#et").tabs("add",{
title:treeNode.name,
closable:true,
iconCls:"icon-edit",
content:"<iframeframeborder='no'height='100%'width='100%'src='"+treeNode.page+"'></iframe>"
});
}
}
}
}
};
$.ajax({
url:'${pageContext.request.contextPath}/json/menu.json',
type:'get',
data:'',
dataType:'json',
success:function(data){
$.fn.zTree.init($("#ztree4"),setting,data);
}
});
});
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。