最近项目中用到了ztree这款树形插件，完备的api,强大的功能真是令人叹服，在此，lizi分享基于ztree的风琴式菜单的制作。
预览图：
演示地址： http://runjs.cn/detail/a2vxktqu
一、准备工作
1、引入核心js,metro样式
<link rel="stylesheet" href="css/reset.css"/> <link rel="stylesheet" href="css/metroStyle/metroStyle.css"/> <link rel="stylesheet" href="css/style.css"/> <style> .ztree * {font-size: 10pt;font-family:"Microsoft Yahei", Verdana,Simsun,"Segoe UI Web Light","Segoe UI Light","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol","Helvetica Neue",Arial} .ztree li ul{ margin:0; padding:0} .ztree li {line-height:35px;} .ztree li a {width:97%;height:35px;padding-top: 0px;} .ztree li a:hover {color:white;text-decoration:none; background-color: #258ecd;} .ztree li a span.button.switch {visibility:hidden} .ztree.showIcon li a span.button.switch {visibility:visible} .ztree li a.curSelectedNode {background-color:#47a3da;color:#fff;border:0;height:35px;} .ztree li span {line-height:35px;} .ztree li span.button {margin-top: -7px;} .ztree li span.button.switch {width: 14px;height: 14px;} .ztree li a span.node_name{font-size: 12px} .ztree li a.level0 span {font-size: 14px;font-weight: 600;} .ztree li span.button{background-image:url("images/left_menuForOutLook.png");*background-image:url("images/left_menuForOutLook.gif"); } .ztree li span.button.switch.level0 {width: 20px; height:20px} .ztree li span.button.switch.level1 {width: 20px; height:20px} .ztree li span.button.noline_open {background-position: 0 0;} .ztree li span.button.noline_close {background-position: -18px 0;} .ztree li span.button.noline_open.level0 {background-position: 0 -18px;} .ztree li span.button.noline_close.level0 {background-position: -18px -18px;} </style>
html
<div class="container"> <div class="siderbar"> <div class="ztree showIcon" id="treeDemo"> </div> </div> <section class="main-content"> <p style="margin: 50px auto;text-align: center;font-size: 24px"> Here to create anything you want ~ </p> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/> </section> </div> <script src="plugins/jQuery/jquery-2.2.3.min.js"></script> <script src="plugins/ztree/jquery.ztree.core.js"></script> <script src="js/menuTree.js"></script>
2、设置ztree配置参数，获取数据源，初始化treeDemo
//这是数据源，其实不用这么冗余的，lizi直接从官网上找了一颗ztree,获取完整的节点数据信息（没必要这样做，simpledata就可以）
var zNodes=[ { "id": 1, "pId": null, "name": "父节点 1", "open": true, "children": [ { "id": 11, "pId": 1, "name": "叶子节点 1-1", "level": 1, "tId": "treeDemo_2", "parentTId": "treeDemo_1", "open": true, "isParent": true, "zAsync": true, "isFirstNode": true, "isLastNode": false, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": 0, "check_Focus": false, "isHover": false, "editNameFlag": false, "children": [ { "id": 105, "pId": 11, "name": "new node5", "level": 2, "tId": "treeDemo_17", "parentTId": "treeDemo_2", "open": false, "isParent": false, "zAsync": true, "isFirstNode": true, "isLastNode": false, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": -1, "check_Focus": false, "isHover": false, "editNameFlag": false }, { "id": 106, "pId": 11, "name": "new node6", "level": 2, "tId": "treeDemo_18", "parentTId": "treeDemo_2", "open": true, "isParent": true, "zAsync": true, "isFirstNode": false, "isLastNode": true, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": 0, "check_Focus": false, "isHover": false, "editNameFlag": false, "children": [ { "id": 107, "pId": 106, "name": "new node7", "level": 3, "tId": "treeDemo_19", "parentTId": "treeDemo_18", "open": false, "isParent": false, "zAsync": true, "isFirstNode": true, "isLastNode": true, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": -1, "check_Focus": false, "isHover": false, "editNameFlag": false } ] } ] }, { "id": 12, "pId": 1, "name": "叶子节点 1-2", "level": 1, "tId": "treeDemo_3", "parentTId": "treeDemo_1", "open": true, "isParent": true, "zAsync": true, "isFirstNode": false, "isLastNode": false, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": 0, "check_Focus": false, "isHover": false, "editNameFlag": false, "children": [ { "id": 104, "pId": 12, "name": "new node4", "level": 2, "tId": "treeDemo_16", "parentTId": "treeDemo_3", "open": false, "isParent": false, "zAsync": true, "isFirstNode": true, "isLastNode": true, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": -1, "check_Focus": false, "isHover": false, "editNameFlag": false } ] }, { "id": 13, "pId": 1, "name": "叶子节点 1-3", "level": 1, "tId": "treeDemo_4", "parentTId": "treeDemo_1", "open": false, "isParent": false, "zAsync": true, "isFirstNode": false, "isLastNode": true, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": -1, "check_Focus": false, "isHover": false, "editNameFlag": false } ], "level": 0, "tId": "treeDemo_1", "parentTId": null, "isParent": true, "zAsync": true, "isFirstNode": true, "isLastNode": false, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": 0, "check_Focus": false, "isHover": false, "editNameFlag": false }, { "id": 2, "pId": null, "name": "父节点 2", "open": true, "children": [ { "id": 21, "pId": 2, "name": "叶子节点 2-1", "level": 1, "tId": "treeDemo_6", "parentTId": "treeDemo_5", "open": true, "isParent": true, "zAsync": true, "isFirstNode": true, "isLastNode": false, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": 0, "check_Focus": false, "isHover": false, "editNameFlag": false, "children": [ { "id": 101, "pId": 21, "name": "new node1", "level": 2, "tId": "treeDemo_13", "parentTId": "treeDemo_6", "open": false, "isParent": false, "zAsync": true, "isFirstNode": true, "isLastNode": false, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": -1, "check_Focus": false, "isHover": false, "editNameFlag": false }, { "id": 102, "pId": 21, "name": "new node2", "level": 2, "tId": "treeDemo_14", "parentTId": "treeDemo_6", "open": false, "isParent": false, "zAsync": true, "isFirstNode": false, "isLastNode": true, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": -1, "check_Focus": false, "isHover": false, "editNameFlag": false } ] }, { "id": 22, "pId": 2, "name": "叶子节点 2-2", "level": 1, "tId": "treeDemo_7", "parentTId": "treeDemo_5", "open": true, "isParent": true, "zAsync": true, "isFirstNode": false, "isLastNode": false, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": 0, "check_Focus": false, "isHover": false, "editNameFlag": false, "children": [ { "id": 103, "pId": 22, "name": "new node3", "level": 2, "tId": "treeDemo_15", "parentTId": "treeDemo_7", "open": false, "isParent": false, "zAsync": true, "isFirstNode": true, "isLastNode": true, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": -1, "check_Focus": false, "isHover": false, "editNameFlag": false } ] }, { "id": 23, "pId": 2, "name": "叶子节点 2-3", "level": 1, "tId": "treeDemo_8", "parentTId": "treeDemo_5", "open": false, "isParent": false, "zAsync": true, "isFirstNode": false, "isLastNode": true, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": -1, "check_Focus": false, "isHover": false, "editNameFlag": false } ], "level": 0, "tId": "treeDemo_5", "parentTId": null, "isParent": true, "zAsync": true, "isFirstNode": false, "isLastNode": false, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": 0, "check_Focus": false, "isHover": false, "editNameFlag": false }, { "id": 3, "pId": null, "name": "父节点 3", "open": true, "children": [ { "id": 31, "pId": 3, "name": "叶子节点 3-1", "level": 1, "tId": "treeDemo_10", "parentTId": "treeDemo_9", "open": false, "isParent": false, "zAsync": true, "isFirstNode": true, "isLastNode": false, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": -1, "check_Focus": false, "isHover": false, "editNameFlag": false }, { "id": 32, "pId": 3, "name": "叶子节点 3-2", "level": 1, "tId": "treeDemo_11", "parentTId": "treeDemo_9", "open": true, "isParent": true, "zAsync": true, "isFirstNode": false, "isLastNode": false, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": 0, "check_Focus": false, "isHover": true, "editNameFlag": false, "children": [ { "id": 108, "pId": 32, "name": "new node8", "level": 2, "tId": "treeDemo_20", "parentTId": "treeDemo_11", "open": false, "isParent": false, "zAsync": true, "isFirstNode": true, "isLastNode": true, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": -1, "check_Focus": false, "isHover": false, "editNameFlag": false } ] }, { "id": 33, "pId": 3, "name": "叶子节点 3-3", "level": 1, "tId": "treeDemo_12", "parentTId": "treeDemo_9", "open": true, "isParent": true, "zAsync": true, "isFirstNode": false, "isLastNode": true, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": 0, "check_Focus": false, "isHover": false, "editNameFlag": false, "children": [ { "id": 109, "pId": 33, "name": "new node9", "level": 2, "tId": "treeDemo_21", "parentTId": "treeDemo_12", "open": false, "isParent": false, "zAsync": true, "isFirstNode": true, "isLastNode": true, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": -1, "check_Focus": false, "isHover": false, "editNameFlag": false } ] } ], "level": 0, "tId": "treeDemo_9", "parentTId": null, "isParent": true, "zAsync": true, "isFirstNode": false, "isLastNode": true, "isAjaxing": false, "checked": false, "checkedOld": false, "nocheck": false, "chkDisabled": false, "halfCheck": false, "check_Child_State": 0, "check_Focus": false, "isHover": false, "editNameFlag": false } ]
var setting={ view: { showLine: false,
//自定义样式 addDiyDom: addDiyDom }, callback: {
//callback func //beforeClick: beforeClick, //在这里没有用上 onClick: onClick, onExpand: zTreeOnExpand } }; function initMenu(){ var treeObj = $("#treeDemo"); for(var z=0;z<zNodes.length;z++){ zNodes[z].open =false; if(zNodes[z].children&&zNodes[z].children.length>0){ for(var w = 0; w <zNodes[z].children.length;w++){ zNodes[z].children[w].open = false; } zNodes[z].children[0].open = true; } } zNodes[0].open =true;
//初始化ztree方法 $.fn.zTree.init(treeObj, setting, zNodes); } initMenu();
3、自定义节点样式
function addDiyDom(treeId, treeNode) { var spaceWidth = 8; 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;" + (spaceWidth * treeNode.level)+ "px'></span>"; switchObj.before(spaceStr); } }
4、节点点击事件，展开事件
function zTreeOnExpand(event,treeId, treeNode){ var treeObj = $.fn.zTree.getZTreeObj(treeId); var treeNodes = treeObj.getNodesByParam("level", 0, null); var treeNodes1 = treeObj.getNodesByParam("level", 1, null); if(treeNode.level==0){ //点击的当前结点为一级节点 for(var i=0;i<treeNodes.length;i++){ //展开当前一级节点 if(treeNode.id ==treeNodes[i].id){ for(var j = 0;j<treeNodes1.length;j++){ if(treeNodes1[j].pId == treeNode.id){ treeObj.expandNode(treeNodes1[j], false, false, true); } } treeObj.expandNode(treeNode, true, false, true); }else{ //收起其他的一级节点 for(var j = 0;j<treeNodes1.length;j++){ if(treeNodes1[j].pId != treeNode.id){ treeObj.expandNode(treeNodes1[j], false, false, true); } } treeObj.expandNode(treeNodes[i], false, false, true); } } }; //如果点击的当前节点为二级节点 if(treeNode.level==1){ //收起该节点的同级节点，仅展开自己 for(var j = 0;j<treeNodes1.length;j++){ if(treeNodes1[j].pId == treeNode.pId&&treeNodes1[j].id!=treeNode.id){ treeObj.expandNode(treeNodes1[j], false, false, true); } } treeObj.expandNode(treeNode, true, false, true); //$("body").scrollTop(0); } } function onClick(event,treeId,treeNode){ if(treeNode.level==0){ var treeObj = $.fn.zTree.getZTreeObj(treeId); var treeNodes = treeObj.getNodesByParam("level", 0, null); var treeNodes1 = treeObj.getNodesByParam("level", 1, null); for(var i=0;i<treeNodes.length;i++){ if(treeNode.id ==treeNodes[i].id){ for(var j = 0;j<treeNodes1.length;j++){ if(treeNodes1[j].pId == treeNode.id){ treeObj.expandNode(treeNodes1[j], false, false, true); } } treeObj.expandNode(treeNode, true, false, true); }else{ //收起其他一级菜单下的所有二级菜单 for(var j = 0;j<treeNodes1.length;j++){ if(treeNodes1[j].pId != treeNode.id){ treeObj.expandNode(treeNodes1[j], false, false, true); } } //收起其他的一级菜单 treeObj.expandNode(treeNodes[i], false, false, true); } } }; }
二、查看演示