今天做完一個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是一個編寫后台管理菜單的好工具。