zTree v3.5 Demo 演示 OutLook 样式的左侧菜单

简介

为了让朋友们更容易的学习 zTree，官网给出了大量的 Demo，不同的图标，不同的风格，好学易懂，这是官网链接：zTree v3.5 Demo 演示。

由于工作需要，这里只是把组合功能中OutLook 样式的左侧菜单参考Demo源码实现了，分享给大家我的学习所得。

Html和CSS

下载zTree v3.5 Demo 演示的源码，将下图所示的文件整合出来，并创建一个outlookStyle.css文件，便于使用，如图：

再创建任意一个html文件，引入以上的所需文件，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 = "";
                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为

，这样，小箭头按钮就一直显示啦。
引入demo文件时，样式如下：

不过，demo.css里有太多用不到的css,你可以把其中给这个ztree加边框的css类拿出来用即可。