JQuery ZTree使用方法详解
程序员文章站
2023-12-14 21:47:22
jquery ztree简单使用
@(javascript)[jquery, ztree, 入门]
基本概述
ztree 是一个依靠 jquery 实现的多功能 “树...
jquery ztree简单使用
@(javascript)[jquery, ztree, 入门]
基本概述
ztree 是一个依靠 jquery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 ztree 最大优点。专门适合项目开发，尤其是 树状菜单、树状数据的web显示、权限管理等等。
ztree 是开源免费的软件（mit 许可证）。在开源的作用下，ztree 越来越完善，目前已经拥有了不少粉丝，并且今后还会推出更多的 ztree 扩展功能库，让 ztree 更加强大。 ——参考《百度百科》
官网：ztree官网
ps：ztree的官方api文档和demo挺详细的，值得一读。
案例
使用标准json数据构造ztree
<%@ page language="java" contenttype="text/html; charset=utf-8" pageencoding="utf-8"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ztree测试</title>
<link rel="stylesheet" type="text/css" href="${pagecontext.request.contextpath}/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pagecontext.request.contextpath}/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pagecontext.request.contextpath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pagecontext.request.contextpath}/js/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="${pagecontext.request.contextpath}/js/ztree/ztreestyle.css" type="text/css">
<script type="text/javascript" src="${pagecontext.request.contextpath}/js/ztree/jquery.ztree.all-3.5.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function() {
var isexists = $("#et").tabs("exists", "标题");
if(isexists) {
$("#et").tabs("select","标题");
} else {
$("#et").tabs("add", {
title:"标题",
closable:true,
iconcls:"icon-save",
content:"<iframe frameborder='no' height='100%' width='100%' src='3-tabs.jsp'></iframe>"
});
}
});
});
</script>
<!-- 使用标准json数据构造ztree -->
<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>
</head>
<body class="easyui-layout">
<!-- 分为五个区域 -->
<div style="height: 100px;" data-options="region:'north'">北部区域</div>
<div style="width: 200px;" data-options="region:'west'">
<div class="easyui-accordion" data-options="fit:true">
<div data-options="iconcls:'icon-save'" title="系统菜单">
<a id="btn" class="easyui-linkbutton">按钮</a>
</div>
<div data-options="iconcls:'icon-remove'" title="业务菜单">
<ul id="ztree1" class="ztree"></ul>
</div>
<div data-options="iconcls:'icon-remove'" title="功能菜单">内容3</div>
<div data-options="iconcls:'icon-remove'" title="非功能菜单">内容4</div>
</div>
</div>
<div style="" data-options="region:'center'">
<div id="et" class="easyui-tabs" data-options="fit:true">
<div data-options="iconcls:'icon-save', closable:true" title="系统菜单">内容1</div>
<div data-options="iconcls:'icon-remove'" title="业务菜单">内容2</div>
</div>
</div>
<div style="width: 100px;" data-options="region:'east'">东部区域</div>
<div style="height: 50px;" data-options="region:'south'">南部区域</div>
</body>
</html>
使用简单json数据构造ztree
<div data-options="iconcls:'icon-remove'" title="功能菜单">
<ul id="ztree2" class="ztree"></ul>
</div>
<!-- 使用简单json数据构造ztree -->
<script type="text/javascript">
$(function() {
var setting = {
data: {
simpledata: {
enable: true
}
}
};
var znodes = [
{"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片段
<div data-options="iconcls:'icon-remove'" title="非功能菜单">
<ul id="ztree3" class="ztree"></ul>
</div>
<!-- 发送ajax请求获取动态json数据构造ztree -->
<script type="text/javascript">
$(function() {
var setting = {
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文件
<div data-options="iconcls:'icon-save'" title="ztree事件">
<ul id="ztree4" class="ztree"></ul>
</div>
<!-- 为ztree节点绑定事件动态添加选项卡 -->
<script type="text/javascript">
$(function() {
var setting = {
data: {
simpledata: {
enable: true
}
},
callback: {
onclick: function(event, treeid, treenode) {
if(treenode.page != undefined) {
var isexists = $("#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:"<iframe frameborder='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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。