我們在做web項目時，常會用到一些樹形菜單。在此，我們利用ztree實現樹形菜單的效果。zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 的最大優點。
接下來，我演示一棵簡單的ztree，效果如下所示：
案例架構如下：
其中，測試文件index.html內容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一棵簡單的ztree</title>
<link rel="stylesheet" type="text/css" href="css/zTreeStyle/zTreeStyle.css"/>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
<script type="text/javascript">
/**
* 聲明一個ztree對象,主要包括三個方面：
* 1.ztree參數配置
* 2.ztree方法
* 3.treeNode節點數據
*/
var ztree;
//ztree參數配置
var setting = {
view: {//視圖參數配置
dblClickExpand: false,//取消雙擊展開樣式
showLine: true,//顯示樹節點之間的連接線
selectedMulti: false//取消多選
},
data: {//數據參數配置
simpleData: {
enable: true, //簡單數據格式
idKey: "id",//當前節點數據的鍵
pIdKey: "pId",//父節點的鍵
rootPId: ""//根節點的鍵
}
},
callback: {//回調函數配置
beforeClick: function (treeId, treeNode) {//單擊前，傳入樹的id，以及樹節點
var zTree = $.fn.zTree.getZTreeObj("tree");//獲取樹對象
if (treeNode.isParent) {//如果單擊的樹節點是一個父節點
zTree.expandNode(treeNode);//就展開該父節點
return false;
} else {
return true;
}
}
}
};
//treeNode節點數據
var ztreeNodes = [
{id: 1, pId: 0, name: "動物", open: true},
{id: 11, pId: 1, name: "無脊椎動物"},
{id: 101, pId: 11, name: "原生動物"},
{id: 10101, pId: 101, name: "草履蟲"},
{id: 10102, pId: 101, name: "變形蟲"},
{id: 102, pId: 11, name: "腔腸動物"},
{id: 10201, pId: 102, name: "水螅"},
{id: 10202, pId: 102, name: "海蜇"},
{id: 103, pId: 11, name: "扁形動物"},
{id: 10301, pId: 103, name: "渦蟲"},
{id: 10302, pId: 103, name: "血吸蟲"},
{id: 104, pId: 11, name: "線形動物"},
{id: 10401, pId: 104, name: "蛔蟲"},
{id: 10402, pId: 104, name: "線蟲"},
{id: 105, pId: 11, name: "環節動物"},
{id: 10501, pId: 105, name: "蚯蚓"},
{id: 10502, pId: 105, name: "沙蠶"},
{id: 106, pId: 11, name: "軟體動物"},
{id: 10601, pId: 106, name: "河蚌"},
{id: 10602, pId: 106, name: "章魚"},
{id: 107, pId: 11, name: "節肢動物"},
{id: 10701, pId: 107, name: "昆蟲"},
{id: 10702, pId: 107, name: "蝦蟹"},
{id: 10703, pId: 107, name: "蜘蛛"},
{id: 10704, pId: 107, name: "蜈蚣"},
{id: 108, pId: 11, name: "棘皮動物"},
{id: 10801, pId: 108, name: "海膽"},
{id: 10802, pId: 108, name: "海星"},
{id: 10803, pId: 108, name: "海蔘"},
{id: 12, pId: 1, name: "脊椎動物"},
{id: 201, pId: 12, name: "魚綱"},
{id: 20101, pId: 201, name: "軟骨魚綱"},
{id: 20101001, pId: 20101, name: "鯊魚"},
{id: 20101002, pId: 20101, name: "孔鰩"},
{id: 20102, pId: 201, name: "硬骨魚綱"},
{id: 20102001, pId: 20102, name: "中華青鱗魚"},
{id: 20102002, pId: 20102, name: "鯉魚"},
{id: 202, pId: 12, name: "兩棲綱"},
{id: 202001, pId: 202, name: "蚓螈"},
{id: 202002, pId: 202, name: "大鯢"},
{id: 202003, pId: 202, name: "蛙"},
{id: 202004, pId: 202, name: "蟾蜍"},
{id: 203, pId: 12, name: "爬行綱"},
{id: 203001, pId: 203, name: "蜥蜴"},
{id: 203002, pId: 203, name: "蛇"},
{id: 203003, pId: 203, name: "龜鱉"},
{id: 203004, pId: 203, name: "鱷魚"},
{id: 204, pId: 12, name: "鳥綱"},
{id: 204001, pId: 204, name: "鸚鵡"},
{id: 204002, pId: 204, name: "鴨雁"},
{id: 204003, pId: 204, name: "企鵝"},
{id: 204004, pId: 204, name: "鷹"},
{id: 204005, pId: 204, name: "雀"},
{id: 205, pId: 12, name: "哺乳綱"},
{id: 205001, pId: 205, name: "鴨嘴獸"},
{id: 205002, pId: 205, name: "熊虎獅"},
{id: 205003, pId: 205, name: "猴猩"},
{id: 205004, pId: 205, name: "馬"},
{id: 205005, pId: 205, name: "羊"},
{id: 205006, pId: 205, name: "駱駝"},
{id: 2, pId: 0, name: "植物", open: true},
{id: 21, pId: 2, name: "綠藻"},
{id: 22, pId: 2, name: "苔蘚"},
{id: 23, pId: 2, name: "蕨類植物"},
{id: 24, pId: 2, name: "種子植物"},
{id: 24001, pId: 24, name: "銀杏"},
{id: 24002, pId: 24, name: "喇叭花"},
{id: 24003, pId: 24, name: "蘋果梨桃杏樹"}
];
//DOM文檔加載完畢即執行
$(document).ready(function () {
var t = $("#tree");
/**
* zTree 初始化方法：$.fn.zTree.init(t, setting, ztreeNodes)
* t:用於展現 zTree 的 DOM 容器
* setting:zTree 的配置參數
* zNodes:zTree 的節點數據
* 即可生成一棵ztree
*/
t = $.fn.zTree.init(t, setting, ztreeNodes);
});
</script>
</head>
<body>
<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
</body>
</html>
上述案例中，需要導入ztree框架，請參考下載路徑http://files.cnblogs.com/files/zuidongfeng/zTree_v3-master.zip，也可以到ztree官網（http://www.treejs.cn）下載。