Ztree异步加载树节点
2012-10-22 16:48
471 查看
最近写程序需要一颗可以一步加载的树，发现ztree功能很强大。搞了好久才知道怎么实现树节点的异步加载，在这里记录下来以方便以后自己忘记了。代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>
<#global path = request.getContextPath() >
<!--以下为,需要引入的css和js类库-->
<link rel="stylesheet" href="${path}/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"/>
<script type="text/javascript" src="${path}/ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${path}/ztree/js/jquery.ztree.core-3.1.js"></script>
<script>
<!--
var zTree;
var productIframe;
var setting = {
async: {
enable: true,//启用异步加载
url:"${path}/pmproductAction!producttree.action", //异步请求地址
autoParam:["id", "str1"], //需要传递的参数,为你在ztree中定义的参数名称
otherParam:{"chk":"chk"}
},
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false,
expandSpeed: ($.browser.msie && parseInt($.browser.version)<=6)?"":"fast"
},
data: {
simpleData: {
enable: true
}
},
callback: {
onAsyncSuccess: onAsyncSuccess,
beforeClick: function(treeId, treeNode)
var zTree = $.fn.zTree.getZTreeObj("ztree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
productIframe.attr("src",treeNode.url);
return true;
}
}
}
};
function onAsyncSuccess(event, treeId, treeNode, msg) {
cancelHalf(treeNode);
}
function cancelHalf(treeNode) {
var zTree = $.fn.zTree.getZTreeObj("ztree");
treeNode.halfCheck = false;
zTree.updateNode(treeNode); //异步加载成功后刷新树节点
}
$(document).ready(function(){
//以下为第一次要加载的一级节点
$.post("${path}/pmproductAction!producttree.action",{id:0,str1:"type"},function(result){
$.fn.zTree.init($("#ztree"), setting, result);
});
productIframe = $("#products");
productIframe.bind("load", loadReady);
});
function loadReady() {
var bodyH = productIframe.contents().find("body").get(0).scrollHeight,
htmlH = productIframe.contents().find("html").get(0).scrollHeight,
maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),
h = productIframe.height() >= maxH ? minH:maxH ;
if (h < 530) h = 530;
productIframe.height(h);
}
//-->
</script>
</head>
<body>
<table border=0 height=500px align=left>
<tr>
<td width="20%" align="left" valign="top" style="BORDER-RIGHT: #999999 1px dashed">
<ul id="ztree" class="ztree" style="overflow:auto;"></ul>
</td>
<td width="80%" align="left" valign="top">
<iframe name="products" id="products" scrolling="auto" width="100%" height="500px" frameborder="0"></iframe>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>
<#global path = request.getContextPath() >
<!--以下为,需要引入的css和js类库-->
<link rel="stylesheet" href="${path}/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"/>
<script type="text/javascript" src="${path}/ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${path}/ztree/js/jquery.ztree.core-3.1.js"></script>
<script>
<!--
var zTree;
var productIframe;
var setting = {
async: {
enable: true,//启用异步加载
url:"${path}/pmproductAction!producttree.action", //异步请求地址
autoParam:["id", "str1"], //需要传递的参数,为你在ztree中定义的参数名称
otherParam:{"chk":"chk"}
},
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false,
expandSpeed: ($.browser.msie && parseInt($.browser.version)<=6)?"":"fast"
},
data: {
simpleData: {
enable: true
}
},
callback: {
onAsyncSuccess: onAsyncSuccess,
beforeClick: function(treeId, treeNode)
var zTree = $.fn.zTree.getZTreeObj("ztree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
productIframe.attr("src",treeNode.url);
return true;
}
}
}
};
function onAsyncSuccess(event, treeId, treeNode, msg) {
cancelHalf(treeNode);
}
function cancelHalf(treeNode) {
var zTree = $.fn.zTree.getZTreeObj("ztree");
treeNode.halfCheck = false;
zTree.updateNode(treeNode); //异步加载成功后刷新树节点
}
$(document).ready(function(){
//以下为第一次要加载的一级节点
$.post("${path}/pmproductAction!producttree.action",{id:0,str1:"type"},function(result){
$.fn.zTree.init($("#ztree"), setting, result);
});
productIframe = $("#products");
productIframe.bind("load", loadReady);
});
function loadReady() {
var bodyH = productIframe.contents().find("body").get(0).scrollHeight,
htmlH = productIframe.contents().find("html").get(0).scrollHeight,
maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),
h = productIframe.height() >= maxH ? minH:maxH ;
if (h < 530) h = 530;
productIframe.height(h);
}
//-->
</script>
</head>
<body>
<table border=0 height=500px align=left>
<tr>
<td width="20%" align="left" valign="top" style="BORDER-RIGHT: #999999 1px dashed">
<ul id="ztree" class="ztree" style="overflow:auto;"></ul>
</td>
<td width="80%" align="left" valign="top">
<iframe name="products" id="products" scrolling="auto" width="100%" height="500px" frameborder="0"></iframe>
</td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- zTree 异步加载 添加子节点重复问题
- Ztree异步加载自动展开节点
- zTree异步加载展开第一级节点的实现方法
- zTree异步加载展开第一级节点
- zTree 异步加载 添加子节点重复问题
- ztree学习之异步加载节点
- ztree学习之异步加载节点（一）
- zTree异步加载数据，默认展开全部节点
- ZTree异步加载时查询节点
- jQuery zTree 异步加载添加子节点重复问题
- ztree实现异步加载(点击节点,请求后台数据,添加数据到对应节点)
- zTree 异步加载 添加子节点重复问题 .
- zTree异步加载展开第一级节点
- ztree插件的使用及列表项拖拽的实现（jQuery）+异步加载节点数据
- 详解Angular结合zTree异步加载节点数据
- zTree实现打开页面时异步加载数据及选中项ID提交到后台
- ztree的异步加载和右键增删改
- MVC中ztree异步加载
- jquery easyui tree异步加载子节点
- zTree动态加载子节点