<!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>
相关推荐
关于javaWeb(S2SH)中使用zTree异步加载树节点问题
最近项目中有一个比较大型的树节点加载,网上面也看过一些解决方案,感觉都不是很好,也有很多误区,比如单击节点时加载子...ztree fileter方法是在每次展开时都会执行,所以根据不同的请求达到异步加载子节点的需求。
该资源原理说明与博客《异步&同步加载树节点----zTree(一)》相一致。
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。下面通过本文给大家分享jQuery zTree 异步加载添加子节点重复问题,需要的朋友参考下吧
前段时间由于项目需要,看了一下ztree,真的很好用,这个项目需要加载几万条的节点数据,如果用一次性加载的方式性能大大的降低了,借助ztree3.1插件写了个异步加载的树。感谢ztree!
主要介绍了zTree异步加载展开第一级节点的实现方法,需要的朋友可以参考下
本篇文章主要给大家分享了Angular结合zTree异步加载节点数据的难点以及方法,有这方面需求的朋友参考下吧。
二、节点异步加载:1、点击展开时加载数据;2、选中节点时加载数据。 前台代码如下: [removed] //ztree设置 var setting = { view: { fontCss: getFontCss }, check: { enable: true }, data: { simple...
ztree动态异步数据树加载,并且附带右键菜单功能,对树节点进行操作
zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、FireFox、Chrome 等浏览器 ...异步加载的意思就是: 当点击展开树节点时,才去请求后台action返回点击节点的子节点数
基于web3.0,采用servlt注解的方式,实现ztree3.5异步加载的功能,内含冻结根节点、禁用右键事件等。
主要为大家详细介绍了jquery zTree异步加载简单实例,ztree采用了延迟加载技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀,感兴趣的小伙伴们可以参考一下
3)、对于某一级节点数就多达几千的情况 延迟加载无效,这种情况建议考虑分页异步加载。 4)、对于全部节点都展开显示的情况,延迟加载无效,这种情况建议不要全部展开。 5),支持各种类型的树形结如checkbox,树结点的...
使用ztree地区联查,多级的节点,ztree异步加载。使用ztree地区联查,多级的节点,ztree异步加载完
对于树的节点加载有两种方法,一是同步全部加载,二是异步分批加载。 1 var zTreeObj; 2 var zNodes; 3 var setting = { 4 check: { 5 enable: true, 6 chkStyle:"checkbox" 7 }, 8 data: { 9 simpleData:...
用 zTree 方法 异步加载 节点数据 用 zTree 方法 更新 节点数据 单击 节点 控制 展开 / 折叠 父节点 控制 根据 参数 查找 节点 其他 鼠标 事件监听 [excheck] 复/单选框功能 演示 [exedit] 编辑功能 演示 大数据量 ...
* 【修改】异步加载时,对于未加载子节点的父节点使用 expandNode 方法时, sonSign 设置为 true后,导致异步加载的节点无法正常显示的bug * 【修改】一次性加载全部数据,如果父节点 A 未展开,但下一级的父节点 ...