left_menu.html
5.93 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - left_menu</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.core-3.0.js"></script>
<!-- <script type="text/javascript" src="../../js/jquery.ztree.excheck-3.0.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.exedit-3.0.js"></script>-->
<SCRIPT LANGUAGE="JavaScript">
<!--
var curMenu = null, zTree_Menu = null;
var setting = {
view: {
showLine: true,
selectedMulti: false,
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
onNodeCreated: this.onNodeCreated,
beforeClick: this.beforeClick,
onClick: this.onClick
}
};
var zNodes =[
{ id:1, pId:0, name:"涓昏彍鍗?1", open:true},
{ id:11, pId:1, name:"瀛愯彍鍗?1"},
{ id:111, pId:11, name:"鍙跺瓙鑺傜偣11"},
{ id:112, pId:11, name:"鍙跺瓙鑺傜偣12"},
{ id:113, pId:11, name:"鍙跺瓙鑺傜偣13"},
{ id:114, pId:11, name:"鍙跺瓙鑺傜偣14"},
{ id:12, pId:1, name:"瀛愯彍鍗?2"},
{ id:121, pId:12, name:"鍙跺瓙鑺傜偣21"},
{ id:122, pId:12, name:"鍙跺瓙鑺傜偣22"},
{ id:123, pId:12, name:"鍙跺瓙鑺傜偣23"},
{ id:124, pId:12, name:"鍙跺瓙鑺傜偣24"},
{ id:2, pId:0, name:"涓昏彍鍗?2"},
{ id:21, pId:2, name:"瀛愯彍鍗?3"},
{ id:211, pId:21, name:"鍙跺瓙鑺傜偣31"},
{ id:212, pId:21, name:"鍙跺瓙鑺傜偣32"},
{ id:213, pId:21, name:"鍙跺瓙鑺傜偣33"},
{ id:214, pId:21, name:"鍙跺瓙鑺傜偣34"},
{ id:22, pId:2, name:"瀛愯彍鍗?4"},
{ id:221, pId:22, name:"鍙跺瓙鑺傜偣41"},
{ id:222, pId:22, name:"鍙跺瓙鑺傜偣42"},
{ id:223, pId:22, name:"鍙跺瓙鑺傜偣43"},
{ id:224, pId:22, name:"鍙跺瓙鑺傜偣44"},
{ id:3, pId:0, name:"涓昏彍鍗?3"},
{ id:31, pId:3, name:"瀛愯彍鍗?5"},
{ id:311, pId:31, name:"鍙跺瓙鑺傜偣51"},
{ id:312, pId:31, name:"鍙跺瓙鑺傜偣52"},
{ id:313, pId:31, name:"鍙跺瓙鑺傜偣53"},
{ id:314, pId:31, name:"鍙跺瓙鑺傜偣54"},
{ id:32, pId:3, name:"瀛愯彍鍗?6"},
{ id:321, pId:32, name:"鍙跺瓙鑺傜偣61"},
{ id:322, pId:32, name:"鍙跺瓙鑺傜偣62"},
{ id:323, pId:32, name:"鍙跺瓙鑺傜偣63"},
{ id:324, pId:32, name:"鍙跺瓙鑺傜偣64"}
];
function beforeClick(treeId, node) {
if (node.isParent) {
if (node.level === 0) {
var pNode = curMenu;
while (pNode && pNode.level !==0) {
pNode = pNode.getParentNode();
}
if (pNode !== node) {
var a = $("#" + pNode.tId + "_a");
a.removeClass("cur");
zTree_Menu.expandNode(pNode, false);
}
a = $("#" + node.tId + "_a");
a.addClass("cur");
var isOpen = false;
for (var i=0,l=node.childs.length; i<l; i++) {
if(node.childs[i].open) {
isOpen = true;
break;
}
}
if (isOpen) {
zTree_Menu.expandNode(node, true);
curMenu = node;
} else {
zTree_Menu.expandNode(node.childs[0], true);
curMenu = node.childs[0];
}
} else {
zTree_Menu.expandNode(node);
}
}
return !node.isParent;
}
function onClick(e, treeId, node) {
alert("Do what you want to do!");
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
curMenu = zTree_Menu.getNodes()[0].childs[0].childs[0];
zTree_Menu.selectNode(curMenu);
var a = $("#" + zTree_Menu.getNodes()[0].tId + "_a");
a.addClass("cur");
});
//-->
</SCRIPT>
<style type="text/css">
.ztree li a.level0 {width:200px;height: 20px; text-align: center; display:block; background-color: #0B61A4; border:1px silver solid;}
.ztree li a.level0.cur {background-color: #66A3D2; }
.ztree li a.level0 span {display: block; color: white; padding-top:3px; font-size:12px; font-weight: bold;word-spacing: 2px;}
.ztree li a.level0 button { float:right; margin-left: 10px; visibility: visible;display:none;}
.ztree li button.switch.level0 {display:none;}
</style>
</HEAD>
<BODY>
<h1>鐢ㄦ潵褰撳仛宸︿晶鑿滃崟鐨?zTree</h1>
<h6>[ 鏂囦欢璺緞锛歞emo/super/left_menu.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>瀹炵幇鏂规硶璇存槑</h2>
<ul class="list">
<li>鍦?鈥淒emo 婕旂ず鈥濅腑鐨勫乏渚ц彍鍗曞氨鏄敤 zTree 瀹炵幇鐨勶紝涓昏鏄潬 css 鏍峰紡璐熻矗鎺掔増锛屽埄鐢?setting 涓殑閰嶇疆杩涜鍔熻兘鍒朵綔锛屾湰 Demo 瀵瑰疄鐜?宸︿晶鑿滃崟杩涜绠€鍗曠殑浠嬬粛锛屼綘涔熷彲浠ラ€氳繃鏌ョ湅 鈥淒emo 婕旂ず鈥濋〉闈㈢殑婧愮爜娣卞叆浜嗚В銆?/li>
<li class="highlight_red">1銆佸叧浜?css 瀹屽叏鍙互鏍规嵁鑷繁鐨勯渶瑕佽繘琛屼釜鎬у寲璋冩暣锛屼緥濡傦細姝?Demo 鐨勮彍鍗曟牱寮?灏?涓?鈥淒emo 婕旂ず鈥濋〉闈㈢殑涓嶄竴鏍凤紝浠呬緵瀵规瘮鍙傝€?/li>
<li class="highlight_red">2銆佷富瑕佺敤鍒扮殑閰嶇疆鏈夛細<br/>
setting.view.showIcon / showLine / selectedMulti / dblClickExpand<br/>
setting.callback.onNodeCreated / beforeClick / onClick
</li>
<li>3銆佹槸鍚﹂渶瑕侀檺鍒跺崟涓€璺緞灞曞紑锛屽畬鍏ㄧ敱浣犵殑闇€姹傝€屽畾锛屽疄鐜颁唬鐮佸彲鍙傝€?"淇濇寔灞曞紑鍗曚竴璺緞"</li>
<li>4銆佸叾浠栬緟鍔╄鍒欙紝璇锋牴鎹疄闄呮儏鍐佃嚜琛岀紪鍐?/li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>