jquery ztree 如何实现异步加载
2个回答
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-ztree-2.5.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
var zTree1;
var setting;
setting = {
checkable: true,
async: true,
asyncUrl: "asyncData/node.txt", //获取节点数据的URL地址
asyncParam: ["name", "id"], //获取节点数据时，必须的数据名称，例如：id、name
asyncParamOther: ["test","true"], //其它参数 ( key, value 键值对格式)
callback:{
beforeAsync: zTreeBeforeAsync,
asyncSuccess: zTreeOnAsyncSuccess,
asyncError: zTreeOnAsyncError
}
};
var zNodes =[];
$(document).ready(function(){
refreshTree('asyncData/node.txt');
});
function getTime() {
var now= new Date();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
return (hour+":"+minute+":"+second);
}
var tmpUrl = "";
function setAsyncUrl(treeNode) {
tmpUrl = "asyncData/" + (tmpUrl.indexOf("fun1.txt")>-1 ? "fun2.txt" : "fun1.txt");
$("#getUrl").html(tmpUrl);
return tmpUrl;
}
function zTreeBeforeAsync(treeId, treeNode) {
var r = $("#beforeAsyncTrue").attr("checked");
if (!r) alert("beforeAsync return false!!");
return r;
}
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
if (treeNode) {
$("#onAsyncSuccessNode").html( "[" + getTime() + "] treeId=" + treeId + ";<br/> tId=" + treeNode.tId + "; Name=" + treeNode.name );
} else {
$("#onAsyncSuccessNode").html( "[" + getTime() + "] treeNode is Root!");
}
}
function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
if (treeNode) {
$("#onAsyncErrorNode").html( "[" + getTime() + "] treeId=" + treeId + ";<br/> tId=" + treeNode.tId + "; Name=" + treeNode.name );
} else {
$("#onAsyncErrorNode").html( "[" + getTime() + "] treeNode is Root!");
}
}
function refreshTree(asyncUrl) {
$("#getUrl").html("");
$("#onAsyncSuccessNode").html("<br/>");
$("#onAsyncErrorNode").html("<br/>");
setting.asyncUrl = asyncUrl;
if ((typeof asyncUrl) == "function") {
$("#asyncUrlCode").html("setAsyncUrl");
} else {
$("#asyncUrlCode").html("\"" + asyncUrl + "\"" );
}
zTree1 = $("#treeDemo").zTree(setting, zNodes);
}
function reloadAsync() {
var treeNode = zTree1.getSelectedNode();
if (!treeNode) {
alert("请先选中一个节点");
return;
}
zTree1.reAsyncChildNodes(treeNode, $("#refreshType").attr("checked") ? "refresh" : "add")
}
function getNow() {
var d = new Date();
return d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() + "." + d.getMilliseconds()
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<center class="headTitle">异步加载演示</center>
<TABLE border=0 width="700" class="tb1">
<TR>
<TD width=340px align=center valign=top>
<div class="zTreeDemoBackground">
<ul id="treeDemo" class="tree"></ul>
</div>
</TD>
<TD width=360px align=left valign=top>
<div class="demoContent">
<li class="title focus">
<button class="ico star" onfocus="this.blur();"></button>异步加载数据源配置
<ul class="remark">——使用 Tomcat 的朋友，可以自己编写 node.jsp</ul>
<ul>
asyncUrl: <INPUT TYPE="radio" id="php" NAME="url" checked onclick="refreshTree('asyncData/node.txt');">node.txt（静态数据）
<br/>
<INPUT TYPE="radio" id="jsp" NAME="url" onclick="refreshTree('asyncData/node.php');">node.php（动态数据）
<br/>
<INPUT TYPE="radio" id="fun" NAME="url" onclick="refreshTree(setAsyncUrl);">function（根据节点修改URL地址）
</ul>
<ul class="event">
<li> setting.async = true;</li>
<li> setting.asyncUrl = <a id="asyncUrlCode"></a>;</li>
<li> </li>
<li> function return value : <a id="getUrl"></a></li>
</ul>
</li>
<li class="title focus">
<button class="ico star" onfocus="this.blur();"></button>操作指示
<ul class="operate">
异步加载选中节点的子节点: <button onclick="reloadAsync();" title="异步加载" onfocus="this.blur();" class="ico refresh"></button>
加载模式：<INPUT TYPE="radio" id="refreshType" name="reloadTypeRadio" checked onfocus="this.blur();">刷新
<INPUT TYPE="radio" id="addType" name="reloadTypeRadio" onfocus="this.blur();">追加
</ul>
</li>
<li class="title focus">
<button class="ico books" onfocus="this.blur();"></button>异步加载说明
<ul class="remark">
异步加载时获取的数据可以是某一级节点的集合。
</ul>
<ul class="remark">
异步加载时获取的数据也可以是若干级节点的集合；<br/>只要满足树形结构的数据即可。
</ul>
</li>
<li class="title focus">
<button class="ico safari" onfocus="this.blur();"></button>事件监控
<ul class="remark">——修改 node.php 产生服务器错误可触发onAsyncError事件</ul>
<ul>
beforeAsync 事件 return:
<INPUT TYPE="radio" id="beforeAsyncTrue" name="beforeAsyncRadio" checked onfocus="this.blur();">true;
<INPUT TYPE="radio" id="beforeAsyncFalse" name="beforeAsyncRadio" onfocus="this.blur();">false
</ul>
<ul class="event">
<li>onAsyncSuccess 事件: <a id="onAsyncSuccessNode"><br/></a></li>
</ul>
<ul class="event">
<li>onAsyncError 事件: <a id="onAsyncErrorNode"><br/></a></li>
</ul>
</li>
</div>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-ztree-2.5.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
var zTree1;
var setting;
setting = {
checkable: true,
async: true,
asyncUrl: "asyncData/node.txt", //获取节点数据的URL地址
asyncParam: ["name", "id"], //获取节点数据时，必须的数据名称，例如：id、name
asyncParamOther: ["test","true"], //其它参数 ( key, value 键值对格式)
callback:{
beforeAsync: zTreeBeforeAsync,
asyncSuccess: zTreeOnAsyncSuccess,
asyncError: zTreeOnAsyncError
}
};
var zNodes =[];
$(document).ready(function(){
refreshTree('asyncData/node.txt');
});
function getTime() {
var now= new Date();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
return (hour+":"+minute+":"+second);
}
var tmpUrl = "";
function setAsyncUrl(treeNode) {
tmpUrl = "asyncData/" + (tmpUrl.indexOf("fun1.txt")>-1 ? "fun2.txt" : "fun1.txt");
$("#getUrl").html(tmpUrl);
return tmpUrl;
}
function zTreeBeforeAsync(treeId, treeNode) {
var r = $("#beforeAsyncTrue").attr("checked");
if (!r) alert("beforeAsync return false!!");
return r;
}
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
if (treeNode) {
$("#onAsyncSuccessNode").html( "[" + getTime() + "] treeId=" + treeId + ";<br/> tId=" + treeNode.tId + "; Name=" + treeNode.name );
} else {
$("#onAsyncSuccessNode").html( "[" + getTime() + "] treeNode is Root!");
}
}
function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
if (treeNode) {
$("#onAsyncErrorNode").html( "[" + getTime() + "] treeId=" + treeId + ";<br/> tId=" + treeNode.tId + "; Name=" + treeNode.name );
} else {
$("#onAsyncErrorNode").html( "[" + getTime() + "] treeNode is Root!");
}
}
function refreshTree(asyncUrl) {
$("#getUrl").html("");
$("#onAsyncSuccessNode").html("<br/>");
$("#onAsyncErrorNode").html("<br/>");
setting.asyncUrl = asyncUrl;
if ((typeof asyncUrl) == "function") {
$("#asyncUrlCode").html("setAsyncUrl");
} else {
$("#asyncUrlCode").html("\"" + asyncUrl + "\"" );
}
zTree1 = $("#treeDemo").zTree(setting, zNodes);
}
function reloadAsync() {
var treeNode = zTree1.getSelectedNode();
if (!treeNode) {
alert("请先选中一个节点");
return;
}
zTree1.reAsyncChildNodes(treeNode, $("#refreshType").attr("checked") ? "refresh" : "add")
}
function getNow() {
var d = new Date();
return d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() + "." + d.getMilliseconds()
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<center class="headTitle">异步加载演示</center>
<TABLE border=0 width="700" class="tb1">
<TR>
<TD width=340px align=center valign=top>
<div class="zTreeDemoBackground">
<ul id="treeDemo" class="tree"></ul>
</div>
</TD>
<TD width=360px align=left valign=top>
<div class="demoContent">
<li class="title focus">
<button class="ico star" onfocus="this.blur();"></button>异步加载数据源配置
<ul class="remark">——使用 Tomcat 的朋友，可以自己编写 node.jsp</ul>
<ul>
asyncUrl: <INPUT TYPE="radio" id="php" NAME="url" checked onclick="refreshTree('asyncData/node.txt');">node.txt（静态数据）
<br/>
<INPUT TYPE="radio" id="jsp" NAME="url" onclick="refreshTree('asyncData/node.php');">node.php（动态数据）
<br/>
<INPUT TYPE="radio" id="fun" NAME="url" onclick="refreshTree(setAsyncUrl);">function（根据节点修改URL地址）
</ul>
<ul class="event">
<li> setting.async = true;</li>
<li> setting.asyncUrl = <a id="asyncUrlCode"></a>;</li>
<li> </li>
<li> function return value : <a id="getUrl"></a></li>
</ul>
</li>
<li class="title focus">
<button class="ico star" onfocus="this.blur();"></button>操作指示
<ul class="operate">
异步加载选中节点的子节点: <button onclick="reloadAsync();" title="异步加载" onfocus="this.blur();" class="ico refresh"></button>
加载模式：<INPUT TYPE="radio" id="refreshType" name="reloadTypeRadio" checked onfocus="this.blur();">刷新
<INPUT TYPE="radio" id="addType" name="reloadTypeRadio" onfocus="this.blur();">追加
</ul>
</li>
<li class="title focus">
<button class="ico books" onfocus="this.blur();"></button>异步加载说明
<ul class="remark">
异步加载时获取的数据可以是某一级节点的集合。
</ul>
<ul class="remark">
异步加载时获取的数据也可以是若干级节点的集合；<br/>只要满足树形结构的数据即可。
</ul>
</li>
<li class="title focus">
<button class="ico safari" onfocus="this.blur();"></button>事件监控
<ul class="remark">——修改 node.php 产生服务器错误可触发onAsyncError事件</ul>
<ul>
beforeAsync 事件 return:
<INPUT TYPE="radio" id="beforeAsyncTrue" name="beforeAsyncRadio" checked onfocus="this.blur();">true;
<INPUT TYPE="radio" id="beforeAsyncFalse" name="beforeAsyncRadio" onfocus="this.blur();">false
</ul>
<ul class="event">
<li>onAsyncSuccess 事件: <a id="onAsyncSuccessNode"><br/></a></li>
</ul>
<ul class="event">
<li>onAsyncError 事件: <a id="onAsyncErrorNode"><br/></a></li>
</ul>
</li>
</div>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这里有一个延迟加载效果 可以实现你的效果
参考资料： http://www.blueidea.com/common/shoutbox/redir.asp?3=wi&id=11716
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
