<!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>
相关推荐
在上述问题中，开发者遇到了在S2SH项目中使用zTree异步加载树节点的问题。首先，我们需要了解zTree异步加载的基本配置。`settingMan`对象包含了zTree的配置参数： 1. `data.simpleData.enable : true`：开启简单...
最近项目中有一个比较大型的树节点加载，网上面也看过一些解决方案，感觉都不是很好，也有很多误区，比如单击节点时加载子...ztree fileter方法是在每次展开时都会执行，所以根据不同的请求达到异步加载子节点的需求。
首先，我们需要理解ZTree异步加载的基本原理。ZTree通过Ajax请求向服务器获取数据，服务器端（这里为Java）处理请求并返回JSON格式的节点数据。ZTree接收到这些数据后动态构建或更新树形结构。这个过程涉及到的主要...
例如，一个基本的zTree异步加载配置可能如下所示： ```javascript var setting = { async: { enable: true, url: "your/data/api", autoParam: ["id"], otherParam: {"token": "yourToken"}, dataFilter: ...
**ZTree 异步加载树结构详解** ZTree 是一款基于 jQuery 的强大的树形插件，广泛应用于构建具有层级关系的列表。在处理大量数据时，为了提高用户体验，避免一次性加载所有节点导致页面卡顿，我们可以采用异步加载...
4. **异步加载数据**：当用户展开树形菜单的某个节点时，ZTree会自动触发异步请求，调用DWR中的后台方法获取子节点数据。后台处理完毕后，将结果返回给前端。 5. **接收并渲染数据**：前端接收到数据后，ZTree会...
"ztree异步加载"正是解决这一问题的一种高效方案。ZTree是一款基于JavaScript的富UI组件，它提供了一种灵活的方式来构建可交互的树形控件。在处理大量数据时，一次性加载所有节点会导致页面响应变慢，用户体验下降，...
【标题】"ztree异步加载demo（有说明文档）" 涉及到的知识点主要围绕着ZTree，这是一个非常流行的JavaScript组件，主要用于构建树形结构的界面，尤其适用于网站导航、文件目录管理和组织结构展示等场景。异步加载是...
### jQuery ZTree异步加载详解 #### 一、概述 jQuery ZTree插件是一款功能强大的树形控件，被广泛应用于Web开发中，用于展示层级结构数据。在大数据量的场景下，同步加载所有节点数据可能会导致页面加载缓慢，用户...
这个"zTree异步加载简单示例VS2008项目完整源码"是针对开发人员的一个实用资源，提供了如何在Visual Studio 2008环境下实现zTree异步加载功能的具体代码实例。 异步加载（Async Loading）是zTree的核心特性之一，它...
在你提到的场景中，"使用ztree异步加载全国地区"是一种优化用户体验的有效方法。zTree是一款非常流行的jQuery插件，主要用于实现树形结构的展示和操作，尤其适用于处理大量数据的场合。 首先，我们来详细了解一下...
【zTree异步加载Demo】是一个基于SpringMVC框架和MySQL数据库实现的示例，它展示了如何使用zTree这一流行的JavaScript树形插件进行异步数据加载。zTree是一款功能强大的jQuery插件，广泛用于构建多级目录结构，如...
在解决jQuery zTree异步加载添加子节点时出现的重复问题之前，我们首先需要理解zTree树插件的基本特性和其工作原理。zTree是一个基于jQuery的树形控件，它支持多功能的树形结构展示，并且可以轻松实现节点的增删改查...
以上就是ZTree异步加载SSH JSON的基本实现步骤。在实际应用中，可能还需要考虑权限控制、懒加载、异步加载失败的处理等问题，以满足更复杂的需求。通过这种方式，我们可以构建出高效、动态的树形界面，提升Web应用的...
《zTree异步加载详解——打造高效数据交互体验》 在IT行业中，zTree是一款广泛应用于Web开发的JavaScript树插件，它以其轻量级、灵活性和强大的功能深受开发者喜爱。尤其是在处理大量数据的场景下，zTree的异步加载...
以下是一个简单的ZTree异步加载示例： ```javascript $(function() { var setting = { async: { enable: true, url: "/getNodes", type: "post", autoParam: ["id"], otherParam: {"type": "async"} }, ...
异步加载是zTree的核心特性之一，它允许在用户滚动或点击节点时按需加载子节点数据，减少了初始页面加载时的数据量，提高了页面响应速度。实现异步加载需要设置`async`参数，例如： ```javascript var setting = { ...
在这个配置中，`async`对象定义了异步加载的相关参数，`url`指定了获取数据的API，`autoParam`和`otherParam`用于传递请求参数。`callback`对象则定义了各种回调函数，如`onClick`是节点被点击时触发的回调。 在...
zTree异步加载展开第一级节点的实现方法 zTree异步加载展开第一级节点的实现方法是指在使用zTree插件时，如何实现异步加载展开第一级节点的功能。实现该功能需要在setting中的callback中添加onAsyncSuccess回调函数...