zTree学习实例
今天做完一个zTree的实例，供有需要的学习！
效果图如下：
其中菜单的所有子节点是从数据库menu表中中读出来交给我们的zTree进行自动挂接。
接下来看看我们这个例子是如何实现的？附主要代码，有需要整个代码的可以评论！！！！
首先要用zTree必须引入这些 css和js
<!-- ztree的js和css -->
<link rel="stylesheet" type="text/css" href="ztree/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.exedit.js"></script>
<script type="text/javascript">
1.数据库（menu表）的设计
CREATE TABLE `menu` ( `id` INT(11) NOT NULL AUTO_INCREMENT, `pid` INT(11) DEFAULT NULL, `title` VARCHAR(50) NOT NULL, `url` VARCHAR(50) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=INNODB AUTO_INCREMENT=19 DEFAULT CHARSET=utf8; /*Data for the table `menu` */ INSERT INTO `menu`(`id`,`pid`,`title`,`url`) VALUES (1,0,'人力资源管理',''),(2,1,'部门管理',''),(3,1,'员工管理',''),(4,1,'福利管理',''),(5,1,'考勤管理',''),(6,2,'部门列表','deplist.jsp'),(7,2,'部门添加','depadd.jsp'),(8,2,'部门审核','depcheck.jsp'),(9,3,'员工列表','emplist.jsp'),(10,3,'员工添加','empadd.jsp'),(11,3,'员工审核','empcheck.jsp'),(12,4,'福利列表','emplist.jsp'),(13,4,'福利添加','empadd.jsp'),(14,5,'今日打卡','card.jsp'),(15,5,'打卡列表','cardlist.jsp'),(16,5,'请假列表','qjlist.jsp'),(17,5,'请假申请','qjadd.jsp'),(18,5,'请假审核','qjcheck.jsp');
2.menu实体类的findAll方法设计
public List findAll() {
log.debug("finding all Menu instances");
try {
String queryString = "from Menu order by id";
return getHibernateTemplate().find(queryString);
} catch (RuntimeException re) {
log.error("find all failed", re);
throw re;
}
}
这个方法我是从hibernate为我们自动生成的menuDao中借过来的.
3.main.jsp
其中script标签中代码很重要，黑色背景的代码为action中一个show方法
@Action(value="show_Menu")
public String show() {
List<Menu> lsmenu = imbiz.findAll();
// 禁止属性关联
PropertyFilter filter = AjaxUtil.filterProperty("students");
// 使用fastJOSN的JSONObject类将map转换为josn字符串
String jlsca = JSONObject.toJSONString(lsmenu, filter,
SerializerFeature.DisableCircularReferenceDetect);
System.out.println("json字符串--->" + jlsca);
AjaxUtil.printString(jlsca);
return null;
}
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'main.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="easyui/themes/default/easyui.css"
type="text/css"></link>
<link rel="stylesheet" href="easyui/themes/icon.css" type="text/css"></link>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<!-- ztree的js和css -->
<link rel="stylesheet" type="text/css" href="ztree/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.exedit.js"></script>
<script type="text/javascript">
/**************************ztree************************************/
//设置ztree标题的颜色
function setFontCss(treeId, treeNode) {
return treeNode.level == 1 ? {color:"red"} : {};
};
var setting = {
// check: {
// enable: true//启动多选框记得导入jquery.ztree.excheck-3.4.js
// },
data: {
simpleData: {
enable: true,//如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId，并且让数据满足父子关系。
idKey: "id",
pIdKey: "pid",
rootPId: 0
},
key: {
name: "title",
url:""
}
},
view: {
showLine: false,//显示连接线
showIcon: true,//显示节点图片
//fontCss: {color:"red"}
fontCss: setFontCss//节点颜色
},
async: { //ztree异步请求数据
enable: true,
url: "show_Menu.action",//请求action方法
autoparam:["id"]
},
callback:{
beforeClick: zTreeBeforeClick,
onAsyncSuccess: zTreeOnAsyncSuccess
}
};
//启动树节点
$(function($){
$.fn.zTree.init($("#treeDemo"), setting);
});
function zTreeOnAsyncSuccess(){
//alert('加载树成功');
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.expandAll(true);
}
function showPanel(stitle,urlpath){
//alert(urlpath); 子节点请求路径
if($('#ttab').tabs('exists',stitle)){
$('#ttab').tabs('select',stitle);
}else{
$('#ttab').tabs('add',{
title:stitle,
content:'<iframe src='+urlpath+' scrolling=no frameborder=0 height=100% width=100% marginheight=0 marginwidth=0/>',
closable:true
});
}
}
//树节点的点击事件
function zTreeBeforeClick(treeId, treeNode, clickFlag) {
//alert("treeNode.id--->"+treeNode.id);
//alert("treeNode.url--->"+treeNode.url);
//alert("treeNode.name--->"+treeNode.title);
if(treeNode.url !== ''){//不新建标签页面显示,让页面显示在中心区域
showPanel(treeNode.title,treeNode.url);
}
return (treeNode.id !== 1);
};
/*******************************************************************/
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'',split:true" style="height:120px;">
<img src="image/banner1.jpg" height="96px" width="100%"></img><br>
<div align="right">当前登录用户:xxx <a href="#">退出登录</a></div>
</div>
<div data-options="region:'south',title:'',split:true" style="height:50px;">
<hr/>
<div align="center">copyright 西安金智科技有限公司版权所有</div>
</div>
<div data-options="region:'east',iconCls:'icon-reload',border:true,title:'East',split:true,collapsible:true" style="width:100px;"></div>
<div data-options="region:'west',title:'人力资源管理系统',split:true" style="width:150px;">
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</div>
<div id="mycent" data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
<!-- 标签页布局 -->
<div id="ttab" class="easyui-tabs" style="width:'fit';height:450px;">
</div>
</div>
</body>
</html>
zTree是一个编写后台管理菜单的好工具。
