您的位置：首页 > 其它
把zTree前的展开收起图标改为三角形，且只有在点击三角形图标时才展开子节点解决方案

2017-01-24 12:22 399 查看
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <meta charset="utf-8" />
5     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6     <title>Title</title>
7     <link href="JS/tool/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
8     <script src="JS/jquery-1.11.1.min.js"></script>
9     <script src="JS/tool/zTree/js/jquery.ztree.core-3.5.js"></script>
10     <script src="JS/tool/zTree/js/jquery.ztree.excheck-3.5.js"></script>
11     <style>
12         .mainbody-left {
13             position: absolute;
14             top: 0;
15             left: 0;
16             padding-top: 52px;
17             width: 230px;
18             height: 100%;
19             background: #292929;
20             z-index: 99;
21             overflow: auto;
22         }
23         .ztree {
24             padding: 0;
25         }
26         .ztree * {
27             font-size: 14px;
28             font-family: "microsoft yahei";
29         }
30         .ztree li a {
31             display: block;
32             padding: 4px 18px;
33             color: #fff;
34             border: 1px #292929 solid;
35         }
36         .ztree li a:hover {
37             background: #484848;
38             border: 1px #484848 solid;
39             text-decoration: none;
40         }
41         .ztree span, .ztree li ul.line {
42             background: none;
43         }
44         .ztree li a.curSelectedNode {
45             padding-top: 4px;
46             background-color: #000;
47             color: black;
48             border: 1px #000 solid;
49             opacity: 0.8;
50         }
51         .ztree li ul {
52             padding: 0;
53         }
54         .ztree > li > a {
55             padding-left: 36px;
56         }
57         .ztree > li > ul > li > a {
58             padding-left: 54px;
59         }
60         .ztree > li > ul > li > ul > li > a {
61             padding-left: 72px;
62         }
63         .ztree li a span.ico_open, .ztree li a span.ico_close, .ztree li a span.ico_docu {
64             background: none;
65         }
66         .ztree li a span.ico_open::after {
67             width: 0;
68             height: 0;
69             border: 4px solid transparent;
70             border-left: 4px solid #808080;
71             content: "";
72             margin: 0;
73             cursor: pointer;
74             display: inline-block;
75             position: relative;
76             left: 0px;
77             top: 6px;
78             transform: rotate(90deg);
79         }
80         .ztree li a span.ico_close::after {
81             width: 0;
82             height: 0;
83             border: 4px solid transparent;
84             border-left: 4px solid #808080;
85             content: "";
86             margin: 0;
87             cursor: pointer;
88             display: inline-block;
89             position: relative;
90             left: 2px;
91             top: 4px;
92             transform: rotate(0deg);
93         }
94         .switch {
95             display: none !important;
96         }
97     </style>
98 </head>
99 <body>
100 <div class="mainbody-left">
101     <div class="vvtree dept-tree left">
102         <ul id="menu_tree_left" class="ztree"></ul>
103     </div>
104 </div>
105 <script>
106 var settingLeft = {
107     view: {
108         dblClickExpand: false,//双击节点时，是否自动展开父节点的标识
109         showLine: false,//是否显示节点之间的连线
110         showIcon: true,
111         fontCss: { 'color': 'white', 'font-weight': 'normal' },//字体样式函数
112         selectedMulti: false //设置是否允许同时选中多个节点
113     },
114     check: {
115         //chkboxType: { "Y": "ps", "N": "ps" },
116         chkStyle: "checkbox",//复选框类型
117         enable: false //每个节点上是否显示 CheckBox
118     },
119     data: {
120         simpleData: {//简单数据模式
121             enable: true,
122             idKey: "id",
123             pIdKey: "pId",
124             rootPId: ""
125         }
126     },
127     callback: {
128         beforeClick: function (treeId, treeNode) {
129             zTree = $.fn.zTree.getZTreeObj("menu_tree_left");
130             if (!treeNode.isParent) {
131                 zTree.checkNode(treeNode, !treeNode.checked, true, true);//单击勾选，再次单击取消勾选
132             }
133         },
134         onClick: function (event, treeId, treeNode) {
135             zTree = $.fn.zTree.getZTreeObj("menu_tree_left");
136             if ($(event.target).hasClass('ico_close') || $(event.target).hasClass('ico_open')) {
137                 zTree.expandNode(treeNode);//如果是父节点，则展开该节点
138             } else {
139                 return;
140             }
141         },
142         onDblClick: function (treeId, treeNode) {
143             //code
144         }
145     }
146 };
147
148 $(function () {
149     //初始化菜单树
150     var zNodes = [
151         { id: 0, pId: -1, name: "一级部门", open: true },
152         { id: 1, pId: 0, name: "二级部门1", open: false },
153         { id: 2, pId: 1, name: "三级部门1" },
154         { id: 3, pId: 1, name: "三级部门2" },
155         { id: 4, pId: 0, name: "二级部门2", open: false },
156         { id: 5, pId: 4, name: "三级部门3" },
157         { id: 6, pId: 4, name: "三级部门4", open: false },
158         { id: 7, pId: 6, name: "四级部门1" },
159         { id: 8, pId: 6, name: "四级部门2" },
160         { id: 9, pId: 0, name: "二级部门3" },
161         { id: 10, pId: 0, name: "二级部门4" }
162     ];
163     $.fn.zTree.init($("#menu_tree_left"), settingLeft, zNodes);
164 });
165 </script>
166 </body>
167 </html>
修改beforeClick，并添加了onClick方法，当点击的对象target拥有class：ico_close或ico_open时（也就是三角形图标），才展开子节点，否则return（也可以做其他操作，自行选择）。

onDblClick是双击事件。

以下是效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航