eeb70f17bd992188e7e8bb304f10d687f994235c.svn-base
5.68 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
156
157
158
159
160
161
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - Hide With Checkbox Mode</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" src="../../../js/jquery.ztree.exhide-3.5.js"></script>
<SCRIPT type="text/javascript">
<!--
var setting = {
check: {
enable: true
},
data: {
key: {
title: "title"
},
simpleData: {
enable: true
}
},
callback: {
onCheck: onCheck
}
};
var zNodes =[
{ id:1, pId:0, name:"父节点1", title:"", checked:true, open:true},
{ id:11, pId:1, name:"父节点11", title:"", checked:true},
{ id:111, pId:11, name:"叶子节点111", title:"", checked:true, isHidden:true},
{ id:112, pId:11, name:"叶子节点112", title:""},
{ id:113, pId:11, name:"叶子节点113", title:""},
{ id:12, pId:1, name:"父节点12", title:"", isHidden:true},
{ id:121, pId:12, name:"叶子节点121", title:""},
{ id:122, pId:12, name:"叶子节点122", title:"", isHidden:true},
{ id:123, pId:12, name:"叶子节点123", title:""},
{ id:2, pId:0, name:"父节点2", title:""},
{ id:21, pId:2, name:"父节点21", title:"", isHidden:true},
{ id:211, pId:21, name:"叶子节点211", title:""},
{ id:212, pId:21, name:"叶子节点212", title:""},
{ id:213, pId:21, name:"叶子节点213", title:""},
{ id:22, pId:2, name:"父节点22", title:""},
{ id:221, pId:22, name:"叶子节点221", title:""},
{ id:222, pId:22, name:"叶子节点222", title:""},
{ id:223, pId:22, name:"叶子节点223", title:""}
];
function onCheck(e, treeId, treeNode) {
count();
}
function setTitle(node) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = node ? [node]:zTree.transformToArray(zTree.getNodes());
for (var i=0, l=nodes.length; i<l; i++) {
var n = nodes[i];
n.title = "[" + n.id + "] isFirstNode = " + n.isFirstNode + ", isLastNode = " + n.isLastNode;
zTree.updateNode(n);
}
}
function count() {
function isForceHidden(node) {
if (!node.parentTId) return false;
var p = node.getParentNode();
return !!p.isHidden ? true : isForceHidden(p);
}
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
checkCount = zTree.getCheckedNodes(true).length,
nocheckCount = zTree.getCheckedNodes(false).length,
hiddenNodes = zTree.getNodesByParam("isHidden", true),
hiddenCount = hiddenNodes.length;
for (var i=0, j=hiddenNodes.length; i<j; i++) {
var n = hiddenNodes[i];
if (isForceHidden(n)) {
hiddenCount -= 1;
} else if (n.isParent) {
hiddenCount += zTree.transformToArray(n.children).length;
}
}
$("#isHiddenCount").text(hiddenNodes.length);
$("#hiddenCount").text(hiddenCount);
$("#checkCount").text(checkCount);
$("#nocheckCount").text(nocheckCount);
}
function showNodes() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getNodesByParam("isHidden", true);
zTree.showNodes(nodes);
setTitle();
count();
}
function hideNodes() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getSelectedNodes();
if (nodes.length == 0) {
alert("请至少选择一个节点");
return;
}
zTree.hideNodes(nodes);
setTitle();
count();
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
$("#hideNodesBtn").bind("click", {type:"rename"}, hideNodes);
$("#showNodesBtn").bind("click", {type:"icon"}, showNodes);
setTitle();
count();
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>配合 checkbox 的隐藏</h1>
<h6>[ 文件路径: exhide/checkbox.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、setting 配置信息说明</h2>
<ul class="list">
<li>使用隐藏功能，无需设置任何参数</li>
</ul>
</li>
<li class="title"><h2>2、treeNode 节点数据说明</h2>
<ul class="list">
<li class="highlight_red">初始化时，设置 treeNode.isHidden = true; 可以让节点隐藏</li>
<li><p>隐藏、显示节点，看看树的变化：<br/><br/>
试试看：[ <a id="hideNodesBtn" href="#" onclick="return false;">隐藏选中的节点</a> ]
[ <a id="showNodesBtn" href="#" onclick="return false;">显示全部被隐藏的节点</a> ]<br/><br/>
<ul id="log" class="log" style="height:125px;">
<li>isHidden = true 的节点共 <span id="isHiddenCount" class="highlight_red"></span> 个</li>
<li>被隐藏的节点共 <span id="hiddenCount" class="highlight_red"></span> 个</li>
<li>当前被勾选的节点共 <span id="checkCount" class="highlight_red"></span> 个</li>
<li>当前未被勾选的节点共 <span id="nocheckCount" class="highlight_red"></span> 个</li>
<li>隐藏节点后，可以看看仍显示节点的 isFirstNode 和 isLastNode 属性</li>
</ul></p>
</li>
</ul>
</li>
<li class="title"><h2>3、其他说明</h2>
<ul class="list">
<li>隐藏节点操作，会影响 isFirstNode 和 isLastNode 属性，但是对于 getPreNode() 和 getNextNode() 方法无影响</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>