left_menu.html
6.07 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
<!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.5.js"></script>
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>-->
<SCRIPT type="text/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-1"},
{ id:111, pId:11, name:"鍙跺瓙鑺傜偣 1-1-1"},
{ id:112, pId:11, name:"鍙跺瓙鑺傜偣 1-1-2"},
{ id:113, pId:11, name:"鍙跺瓙鑺傜偣 1-1-3"},
{ id:114, pId:11, name:"鍙跺瓙鑺傜偣 1-1-4"},
{ id:12, pId:1, name:"瀛愯彍鍗?1-2"},
{ id:121, pId:12, name:"鍙跺瓙鑺傜偣 1-2-1"},
{ id:122, pId:12, name:"鍙跺瓙鑺傜偣 1-2-2"},
{ id:123, pId:12, name:"鍙跺瓙鑺傜偣 1-2-3"},
{ id:124, pId:12, name:"鍙跺瓙鑺傜偣 1-2-4"},
{ id:2, pId:0, name:"涓昏彍鍗?2"},
{ id:21, pId:2, name:"瀛愯彍鍗?2-1"},
{ id:211, pId:21, name:"鍙跺瓙鑺傜偣 2-1-1"},
{ id:212, pId:21, name:"鍙跺瓙鑺傜偣 2-1-2"},
{ id:213, pId:21, name:"鍙跺瓙鑺傜偣 2-1-3"},
{ id:214, pId:21, name:"鍙跺瓙鑺傜偣 2-1-4"},
{ id:22, pId:2, name:"瀛愯彍鍗?2-2"},
{ id:221, pId:22, name:"鍙跺瓙鑺傜偣 2-2-1"},
{ id:222, pId:22, name:"鍙跺瓙鑺傜偣 2-2-2"},
{ id:223, pId:22, name:"鍙跺瓙鑺傜偣 2-2-3"},
{ id:224, pId:22, name:"鍙跺瓙鑺傜偣 2-2-4"},
{ id:3, pId:0, name:"涓昏彍鍗?3"},
{ id:31, pId:3, name:"瀛愯彍鍗?3-1"},
{ id:311, pId:31, name:"鍙跺瓙鑺傜偣 3-1-1"},
{ id:312, pId:31, name:"鍙跺瓙鑺傜偣 3-1-2"},
{ id:313, pId:31, name:"鍙跺瓙鑺傜偣 3-1-3"},
{ id:314, pId:31, name:"鍙跺瓙鑺傜偣 3-1-4"},
{ id:32, pId:3, name:"瀛愯彍鍗?3-2"},
{ id:321, pId:32, name:"鍙跺瓙鑺傜偣 3-2-1"},
{ id:322, pId:32, name:"鍙跺瓙鑺傜偣 3-2-2"},
{ id:323, pId:32, name:"鍙跺瓙鑺傜偣 3-2-3"},
{ id:324, pId:32, name:"鍙跺瓙鑺傜偣 3-2-4"}
];
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.children.length; i<l; i++) {
if(node.children[i].open) {
isOpen = true;
break;
}
}
if (isOpen) {
zTree_Menu.expandNode(node, true);
curMenu = node;
} else {
zTree_Menu.expandNode(node.children[0].isParent?node.children[0]:node, true);
curMenu = node.children[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].children[0].children[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 span.button { float:right; margin-left: 10px; visibility: visible;display:none;}
.ztree li span.button.switch.level0 {display:none;}
</style>
</HEAD>
<BODY>
<h1>宸︿晶鑿滃崟</h1>
<h6>[ 鏂囦欢璺緞: 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>