checkbox_fun.html
6.46 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
154
155
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - beforeCheck / onCheck</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 setting = {
view: {
selectedMulti: false
},
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeCheck: beforeCheck,
onCheck: onCheck
}
};
var zNodes =[
{ id:1, pId:0, name:"闅忔剰鍕鹃€?鐖?, open:true},
{ id:11, pId:1, name:"娌℃湁 checkbox 1", nocheck:true},
{ id:12, pId:1, name:"闅忔剰鍕鹃€?瀛?1", open:true},
{ id:121, pId:12, name:"闅忔剰鍕鹃€?瀛?1"},
{ id:122, pId:12, name:"闅忔剰鍕鹃€?瀛?2"},
{ id:123, pId:12, name:"娌℃湁 checkbox 2", nocheck:true},
{ id:13, pId:1, name:"闅忔剰鍕鹃€?瀛?2"},
{ id:2, pId:0, name:"绂佹鍕鹃€?鐖?, open:true, doCheck:false},
{ id:21, pId:2, name:"绂佹鍕鹃€?瀛?1", doCheck:false},
{ id:22, pId:2, name:"绂佹鍕鹃€?瀛?2", checked:true, open:true, doCheck:false},
{ id:221, pId:22, name:"绂佹鍕鹃€?瀛?1", doCheck:false},
{ id:222, pId:22, name:"绂佹鍕鹃€?瀛?2", checked:true, doCheck:false},
{ id:223, pId:22, name:"绂佹鍕鹃€?瀛?3", doCheck:false},
{ id:23, pId:2, name:"绂佹鍕鹃€?瀛?3", doCheck:false}
];
var code, log, className = "dark";
function beforeCheck(treeId, treeNode) {
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" beforeCheck ] " + treeNode.name );
return (treeNode.doCheck !== false);
}
function onCheck(e, treeId, treeNode) {
showLog("[ "+getTime()+" onCheck ] " + treeNode.name );
}
function showLog(str) {
if (!log) log = $("#log");
log.append("<li class='"+className+"'>"+str+"</li>");
if(log.children("li").length > 6) {
log.get(0).removeChild(log.children("li")[0]);
}
}
function getTime() {
var now= new Date(),
h=now.getHours(),
m=now.getMinutes(),
s=now.getSeconds(),
ms=now.getMilliseconds();
return (h+":"+m+":"+s+ " " +ms);
}
function checkNode(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
type = e.data.type,
nodes = zTree.getSelectedNodes();
if (type.indexOf("All")<0 && nodes.length == 0) {
alert("璇峰厛閫夋嫨涓€涓妭鐐?);
}
if (type == "checkAllTrue") {
zTree.checkAllNodes(true);
} else if (type == "checkAllFalse") {
zTree.checkAllNodes(false);
} else {
for (var i=0, l=nodes.length; i<l; i++) {
if (type == "checkTrue") {
zTree.checkNode(nodes[i], true);
} else if (type == "checkFalse") {
zTree.checkNode(nodes[i], false);
}else if (type == "checkTruePS") {
zTree.checkNode(nodes[i], true, true);
} else if (type == "checkFalsePS") {
zTree.checkNode(nodes[i], false, true);
}
}
}
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
$("#checkTrue").bind("click", {type:"checkTrue"}, checkNode);
$("#checkFalse").bind("click", {type:"checkFalse"}, checkNode);
$("#checkTruePS").bind("click", {type:"checkTruePS"}, checkNode);
$("#checkFalsePS").bind("click", {type:"checkFalsePS"}, checkNode);
$("#checkAllTrue").bind("click", {type:"checkAllTrue"}, checkNode);
$("#checkAllFalse").bind("click", {type:"checkAllFalse"}, checkNode);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>鐢?zTree 鏂规硶 鍕鹃€?checkbox</h1>
<h6>[ 鏂囦欢璺緞锛歞emo/excheck/checkbox_fun.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>1銆乥eforeCheck / onCheck 浜嬩欢鍥炶皟鍑芥暟鎺у埗</h2>
<ul class="list">
<li>鍒╃敤 beforeCheck / onCheck 浜嬩欢鍥炶皟鍑芥暟 鍙互鎺у埗鏄惁鍏佽 鏇存敼 鑺傜偣鍕鹃€夌姸鎬侊紝杩欓噷绠€鍗曟紨绀哄浣曠洃鎺ф浜嬩欢</li>
<li><p>杩欓噷杩樻紨绀轰簡 checkNode / checkAllNodes 鏂规硶瑙﹀彂 beforeCheck / onCheck 浜嬩欢鍥炶皟鍑芥暟鐨勬儏鍐碉紝璇曡瘯鐪嬶細<br/>
鍗曚釜鑺傜偣--[ <a id="checkTrue" href="#" title="涓嶆兂鍕鹃€夋垜灏变笉鍕鹃€変綘..." onclick="return false;">鍕鹃€?/a> ]
[ <a id="checkFalse" href="#" title="涓嶆兂鍙栨秷鍕鹃€夋垜灏变笉鍙栨秷浣?.." onclick="return false;">鍙栨秷鍕鹃€?/a> ]<br/>
鍗曚釜鑺傜偣 ( 淇濇寔鍏宠仈鍏崇郴 )--[ <a id="checkTruePS" href="#" title="涓嶆兂鍕鹃€夋垜灏变笉鍕鹃€変綘..." onclick="return false;">鍕鹃€?/a> ]
[ <a id="checkFalsePS" href="#" title="涓嶆兂鍙栨秷鍕鹃€夋垜灏变笉鍙栨秷浣?.." onclick="return false;">鍙栨秷鍕鹃€?/a> ]<br/>
鍏ㄩ儴鑺傜偣--[ <a id="checkAllTrue" href="#" title="涓嶇浣犳湁澶歂B锛岀粺缁熼兘瑕佸惉鎴戠殑锛侊紒" onclick="return false;">鍕鹃€?/a> ]
[ <a id="checkAllFalse" href="#" title="涓嶇浣犳湁澶歂B锛岀粺缁熼兘瑕佸惉鎴戠殑锛侊紒" onclick="return false;">鍙栨秷鍕鹃€?/a> ]</p>
<li><p><span class="highlight_red">浣跨敤 zTreeObj.checkNode / checkAllNodes 鏂规硶锛岃缁嗚鍙傝 API 鏂囨。涓殑鐩稿叧鍐呭</span><br/>
beforeCheck / onCheck log:<br/>
<ul id="log" class="log" style="height:130px;"></ul></p>
</li>
</ul>
</li>
<li class="title"><h2>2銆乻etting 閰嶇疆淇℃伅璇存槑</h2>
<ul class="list">
<li>鍚?"checkbox 鍕鹃€夋搷浣? 涓殑璇存槑</li>
</ul>
</li>
<li class="title"><h2>3銆乼reeNode 鑺傜偣鏁版嵁璇存槑</h2>
<ul class="list">
<li>鍚?"checkbox 鍕鹃€夋搷浣? 涓殑璇存槑</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>