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

2016-07-07 22:18:00

简介

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

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

Html和CSS

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

再创建任意一个html文件，引入以上的所需文件，html代码如下：

    zTreeStyleDemo-outlookStyle    -->

注：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");             });        });