<!DOCTYPE html>
|
<HTML>
|
<HEAD>
|
<TITLE> ZTREE DEMO - async for All</TITLE>
|
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
|
<link href="../../../css/demo.css" rel="stylesheet" type="text/css">
|
<link href="../../../css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css">
|
<script src="../../../js/jquery-1.4.4.min.js" type="text/javascript"></script>
|
<script src="../../../js/jquery.ztree.core.js" type="text/javascript"></script>
|
<!--<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
|
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
|
<SCRIPT type="text/javascript">
|
<!--
|
var demoMsg = {
|
async:"正在进行异步加载，请等一会儿再点击...",
|
expandAllOver: "全部展开完毕",
|
asyncAllOver: "后台异步加载完毕",
|
asyncAll: "已经异步加载完毕，不再重新加载",
|
expandAll: "已经异步加载完毕，使用 expandAll 方法"
|
}
|
var setting = {
|
async: {
|
enable: true,
|
url:"../asyncData/getNodes.php",
|
autoParam:["id", "name=n", "level=lv"],
|
otherParam:{"otherParam":"zTreeAsyncTest"},
|
dataFilter: filter,
|
type: "get"
|
},
|
callback: {
|
beforeAsync: beforeAsync,
|
onAsyncSuccess: onAsyncSuccess,
|
onAsyncError: onAsyncError
|
}
|
};
|
|
function filter(treeId, parentNode, childNodes) {
|
if (!childNodes) return null;
|
for (var i=0, l=childNodes.length; i<l; i++) {
|
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
|
}
|
return childNodes;
|
}
|
|
function beforeAsync() {
|
curAsyncCount++;
|
}
|
|
function onAsyncSuccess(event, treeId, treeNode, msg) {
|
curAsyncCount--;
|
if (curStatus == "expand") {
|
expandNodes(treeNode.children);
|
} else if (curStatus == "async") {
|
asyncNodes(treeNode.children);
|
}
|
|
if (curAsyncCount <= 0) {
|
if (curStatus != "init" && curStatus != "") {
|
$("#demoMsg").text((curStatus == "expand") ? demoMsg.expandAllOver : demoMsg.asyncAllOver);
|
asyncForAll = true;
|
}
|
curStatus = "";
|
}
|
}
|
|
function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
|
curAsyncCount--;
|
|
if (curAsyncCount <= 0) {
|
curStatus = "";
|
if (treeNode!=null) asyncForAll = true;
|
}
|
}
|
|
var curStatus = "init", curAsyncCount = 0, asyncForAll = false,
|
goAsync = false;
|
function expandAll() {
|
if (!check()) {
|
return;
|
}
|
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
if (asyncForAll) {
|
$("#demoMsg").text(demoMsg.expandAll);
|
zTree.expandAll(true);
|
} else {
|
expandNodes(zTree.getNodes());
|
if (!goAsync) {
|
$("#demoMsg").text(demoMsg.expandAll);
|
curStatus = "";
|
}
|
}
|
}
|
function expandNodes(nodes) {
|
if (!nodes) return;
|
curStatus = "expand";
|
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
for (var i=0, l=nodes.length; i<l; i++) {
|
zTree.expandNode(nodes[i], true, false, false);
|
if (nodes[i].isParent && nodes[i].zAsync) {
|
expandNodes(nodes[i].children);
|
} else {
|
goAsync = true;
|
}
|
}
|
}
|
|
function asyncAll() {
|
if (!check()) {
|
return;
|
}
|
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
if (asyncForAll) {
|
$("#demoMsg").text(demoMsg.asyncAll);
|
} else {
|
asyncNodes(zTree.getNodes());
|
if (!goAsync) {
|
$("#demoMsg").text(demoMsg.asyncAll);
|
curStatus = "";
|
}
|
}
|
}
|
function asyncNodes(nodes) {
|
if (!nodes) return;
|
curStatus = "async";
|
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
for (var i=0, l=nodes.length; i<l; i++) {
|
if (nodes[i].isParent && nodes[i].zAsync) {
|
asyncNodes(nodes[i].children);
|
} else {
|
goAsync = true;
|
zTree.reAsyncChildNodes(nodes[i], "refresh", true);
|
}
|
}
|
}
|
|
function reset() {
|
if (!check()) {
|
return;
|
}
|
asyncForAll = false;
|
goAsync = false;
|
$("#demoMsg").text("");
|
$.fn.zTree.init($("#treeDemo"), setting);
|
}
|
|
function check() {
|
if (curAsyncCount > 0) {
|
$("#demoMsg").text(demoMsg.async);
|
return false;
|
}
|
return true;
|
}
|
|
$(document).ready(function(){
|
$.fn.zTree.init($("#treeDemo"), setting);
|
$("#expandAllBtn").bind("click", expandAll);
|
$("#asyncAllBtn").bind("click", asyncAll);
|
$("#resetBtn").bind("click", reset);
|
});
|
//-->
|
</SCRIPT>
|
</HEAD>
|
|
<BODY>
|
<h1>异步加载模式下全部展开</h1>
|
<h6>[ 文件路径: super/asyncForAll.html ]</h6>
|
<div class="content_wrap">
|
<div class="zTreeDemoBackground left">
|
<ul class="ztree" id="treeDemo"></ul>
|
</div>
|
<div class="right">
|
<ul class="info">
|
<li class="title"><h2>实现方法说明</h2>
|
<ul class="list">
|
<li>利用 onAsyncSuccess / onAsyncError 回调函数 和 reAsyncChildNodes 或 expandNode 方法可以实现全部功能。</li>
|
<li class="highlight_red">如果父节点数量很大，请注意利用延时进行控制，避免异步进程过多。</li>
|
<li class="highlight_red">建议：演示时请利用调试工具查看 network 的 ajax 加载过程。</li>
|
<li>演示操作
|
<br/><br/>
|
[ <a href="#" id="expandAllBtn" onclick="return false;">全部展开</a> ]
|
[ <a href="#" id="asyncAllBtn" onclick="return false;">后台自动全部加载</a> ]<br/><br/>
|
[ <a href="#" id="resetBtn" onclick="return false;">Reset zTree</a> ]<br/><br/>
|
<p class="highlight_red" id="demoMsg"></p>
|
</li>
|
</ul>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</BODY>
|
</HTML>
|
