简介
为了让朋友们更容易的学习 zTree，官网给出了大量的 Demo，不同的图标，不同的风格，好学易懂，这是官网链接：zTree v3.5 Demo 演示。
由于工作需要，这里只是把组合功能中OutLook 样式的左侧菜单参考Demo源码实现了，分享给大家我的学习所得。
Html和CSS
下载zTree v3.5 Demo 演示的源码，将下图所示的文件整合出来，并创建一个outlookStyle.css文件，便于使用，如图：
再创建任意一个html文件，引入以上的所需文件，html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>zTreeStyleDemo-outlookStyle</title>
<!--<link rel="stylesheet" href="zTreeStyle/demo.css" type="text/css">-->
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="zTreeStyle/outlookStyle.css" type="text/css">
</head>
<body>
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<script type="text/javascript" src='js/jquery-2.0.2.min.js'></script>
<script src="zTreeStyle/jquery.ztree.core.js"></script>
</html>注：demo.css可有可无，之后会结合图片说明。
js代码
ztree的setting 配置
注意：在ztree的setting 配置利用 addDiyDom 回调将 展开按钮 转移到a标签内，否则展开按钮（即小箭头图片）无法显示。
var setting = {
view: {
showLine: false,
showIcon: false,
selectedMulti: false,
dblClickExpand: false,
addDiyDom: addDiyDom
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: beforeClick
}
};
var zNodes =[
{ id:1, pId:0, name:"Folders", open:true},
{ id:11, pId:1, name:"Inbox"},
{ id:111, pId:11, name:"Inbox1"},
{ id:112, pId:111, name:"Inbox2"},
{ id:113, pId:112, name:"Inbox3"},
{ id:114, pId:113, name:"Inbox4"},
{ id:12, pId:1, name:"Junk"},
{ id:13, pId:1, name:"Drafts"},
{ id:14, pId:1, name:"Sent"},
{ id:15, pId:1, name:"Deleted"},
{ id:3, pId:0, name:"Quick views"},
{ id:31, pId:3, name:"Documents"},
{ id:32, pId:3, name:"Photos"}
];
function addDiyDom(treeId, treeNode) {
var spaceWidth = 5;
var switchObj = $("#" + treeNode.tId + "_switch"),
icoObj = $("#" + treeNode.tId + "_ico");
switchObj.remove();
icoObj.before(switchObj);
if (treeNode.level > 1) {
var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'></span>";
switchObj.before(spaceStr);
}
}
function beforeClick(treeId, treeNode) {
if (treeNode.level == 0 ) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.expandNode(treeNode);
return false;
}
return true;
}
鼠标滑过时展开按钮的隐藏、显示
js代码如下：
$(document).ready(function(){
var treeObj = $("#treeDemo");
$.fn.zTree.init(treeObj, setting, zNodes);
//这三句根据需要写，我工作中不需要，所以删掉了
// zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
// curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
// zTree_Menu.selectNode(curMenu);
treeObj.hover(function () {
if (!treeObj.hasClass("showIcon")) {
treeObj.addClass("showIcon");
}
}, function() {
treeObj.removeClass("showIcon");
});
});OutLook 样式的左侧菜单 效果图
最后实现的效果就是页面打开时如下图所示：
当鼠标滑过时展开按钮显示出来，点击展开按钮，层层展开，如图：
如果，不喜欢鼠标滑过显示，不滑过的时候不显示，可以去掉$(document).ready(function(){});中的treeObj.hover这段，修改html的ul为<ul id="treeDemo" class="ztree showIcon"></ul>，这样，小箭头按钮就一直显示啦。
引入demo文件时，样式如下：
不过，demo.css里有太多用不到的css,你可以把其中给这个ztree加边框的css类拿出来用即可。
ztree相关系列文章
zTree -- jQuery 树插件 使用方法与例子
zTree -- jQuery 树插件 构造treeNode JSON 数据对象
zTree v3.5 Demo 演示 OutLook 样式的左侧菜单
VUE中使用 zTree -- jQuery 树插件 及 使用时报错 jQuery is not defined 的问题解决
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。