diy_async.html
5.97 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
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - big data async</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 = {
async: {
enable: true,
url: getUrl
},
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
view: {
expandSpeed: ""
},
callback: {
beforeExpand: beforeExpand,
onAsyncSuccess: onAsyncSuccess,
onAsyncError: onAsyncError
}
};
var zNodes =[
{name:"500涓妭鐐?, id:"1", count:500, times:1, isParent:true},
{name:"1000涓妭鐐?, id:"2", count:1000, times:1, isParent:true},
{name:"2000涓妭鐐?, id:"3", count:2000, times:1, isParent:true}
];
var log, className = "dark",
startTime = 0, endTime = 0, perCount = 100, perTime = 100;
function getUrl(treeId, treeNode) {
var curCount = (treeNode.childs) ? treeNode.childs.length : 0;
var getCount = (curCount + perCount) > treeNode.count ? (treeNode.count - curCount) : perCount;
var param = "id="+treeNode.id+"_"+(treeNode.times++) +"&count="+getCount;
return "../asyncData/getNodesForBigData.php?" + param;
}
function beforeExpand(treeId, treeNode) {
if (!treeNode.isAjaxing) {
startTime = new Date();
treeNode.times = 1;
ajaxGetNodes(treeNode, "refresh");
return true;
} else {
alert("zTree 姝ｅ湪涓嬭浇鏁版嵁涓紝璇风◢鍚庡睍寮€鑺傜偣銆傘€傘€?);
return false;
}
}
function onAsyncSuccess(event, treeId, treeNode, msg) {
if (!msg || msg.length == 0) {
return;
}
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
totalCount = treeNode.count;
if (treeNode.childs.length < totalCount) {
setTimeout(function() {ajaxGetNodes(treeNode);}, perTime);
} else {
treeNode.icon = "";
zTree.updateNode(treeNode);
zTree.selectNode(treeNode.childs[0]);
endTime = new Date();
var usedTime = (endTime.getTime() - startTime.getTime())/1000;
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" ] treeNode:" + treeNode.name );
showLog("鍔犺浇瀹屾瘯锛屽叡杩涜 "+ (treeNode.times-1) +" 娆″紓姝ュ姞杞? 鑰楁椂锛?+ usedTime + " 绉?);
}
}
function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
alert("寮傛鑾峰彇鏁版嵁鍑虹幇寮傚父銆?);
treeNode.icon = "";
zTree.updateNode(treeNode);
}
function ajaxGetNodes(treeNode, reloadType) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
if (reloadType == "refresh") {
treeNode.icon = "../../css/zTreeStyle/img/loading.gif";
zTree.updateNode(treeNode);
}
zTree.reAsyncChildNodes(treeNode, reloadType, true);
}
function showLog(str) {
if (!log) log = $("#log");
log.append("<li class='"+className+"'>"+str+"</li>");
if(log.children("li").length > 4) {
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);
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1>鍒嗘壒寮傛鍔犺浇澶ф暟鎹噺</h1>
<h6>[ 鏂囦欢璺緞锛歞emo/bigdata/diy_async.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul>
<li class="highlight_red"> 姝?Demo 涓撻棬鐢ㄤ簬娴嬭瘯鍒嗘壒寮傛鍔犺浇锛屾瘡娆″睍寮€鑺傜偣閮借閲嶆柊杩涜寮傛鍔犺浇銆?/li>
</ul>
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1銆佸ぇ鏁版嵁閲忓姞杞借鏄?/h2>
<ul class="list">
<li>1)銆佸浜庢煇涓€绾ц妭鐐规暟澶氳揪鍑犲崈涓殑鏃跺€欙紝zTree 榛樿鐨勫欢杩熷姞杞芥槸鏃犳晥鐨勶紝姝?Demo 婕旂ず浜嗕竴绉嶅師鍏?zTree v2.6 鏃剁殑鍒嗘壒鍔犺浇鑺傜偣鐨勬柟娉曘€?/li>
<li class="highlight_red">2)銆佹鏂规硶閫傜敤浜?銆?鍗冧釜鑺傜偣蹇呴』鍏ㄩ儴鏄剧ず鐨勯渶姹傘€?/li>
<li class="highlight_red">3)銆佹鏂规硶骞朵笉鑳借В鍐冲姞杞芥參鐨勯棶棰橈紝鐩稿弽鍙細璁╂渶缁堢粨鏋滃嚭鐜扮殑鏇存參锛屽彧鏄彲浠ユ湁闄愬害鐨勯伩鍏嶆祻瑙堝櫒鍋囨锛岃€屼笖鏄剧ず鐨勮妭鐐硅秺澶氬氨瓒婃參銆?/li>
<li>4)銆佸浜庢煇涓€绾ц妭鐐规暟鑷冲皯鍑犲崈涓殑鎯呭喌锛屽彟涓€涓В鍐虫柟妗堟槸锛氬垎椤靛紓姝ュ姞杞姐€?br/>
async load log:<br/>
<ul id="log" class="log" style="height:85px"></ul></li>
</ul>
</li>
<li class="title"><h2>2銆乻etting 閰嶇疆淇℃伅璇存槑</h2>
<ul class="list">
<li>闇€瑕佽缃?setting.async 寮傛鍔犺浇閮ㄥ垎鐨勫弬鏁?/li>
<li>寤鸿鍏抽棴鍔ㄧ敾鏁堟灉 setting.view.expandSpeed = "";</li>
<li>鍏朵粬涓嶉渶瑕佽繘琛岀壒娈婄殑閰嶇疆锛屾牴鎹嚜宸辩殑闇€姹傝嚜琛岃缃?/li>
</ul>
</li>
<li class="title"><h2>3銆乼reeNode 鑺傜偣鏁版嵁璇存槑</h2>
<ul class="list">
<li>瀵?鑺傜偣鏁版嵁 娌℃湁鐗规畩瑕佹眰锛岀敤鎴峰彲浠ユ牴鎹嚜宸辩殑闇€姹傛坊鍔犺嚜瀹氫箟灞炴€?/li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>