treeview的动态加载代码：
<li><span class='folder'>New Sublist</span>
<ul>
<li><span class='file'>Item1</span></li>
<li><span class='file'>Item2</span></li>
</ul>
</li>
<!--因为它的结构和我的动态加载中的结构不同，我的动态html部分的结构如下-->
<ul>
<li><span class='folder'>分类名称</span></li>
……
</ul>
ps:treeview本身的动态添加就无法cookie ：）
treeview主要修改的不分：
1,jquery.treeview.js中添加的部分
prepareBranchesForAjax: function(settings) {
if (!settings.prerendered) {
// mark last tree items
//this.children("ul").find("li:last").addClass(CLASSES.last);
this.find("li:last").addClass(CLASSES.last);
// collapse whole tree, or only those marked as closed, anyway except those marked as open
//this.filter((settings.collapsed ? "" : "." + CLASSES.closed) + ":not(." + CLASSES.open + ")").find(">ul").hide();
}
// return all items with sublists
return this.filter(":has(>ul)");
},
prepareBranchesForDF: function(settings) {
if (!settings.prerendered) {
// mark last tree items
//this.filter(":last-child:not(ul)").addClass(CLASSES.last);
//this.filter(":last-child:has(ul)").addClass(CLASSES.last);
// collapse whole tree, or only those marked as closed, anyway except those marked as open
this.filter((settings.collapsed ? "" : "." + CLASSES.closed) + ":not(." + CLASSES.open + ")").find(">ul").hide();
}
// return all items with sublists
return this.filter(":has(>ul)");
},
2,query.treeview.edit.js修改的部分
return proxied.apply(this, arguments).bind("add", function(event, settings) {
var branches = settings.add;
var self = settings.self;
$(branches).prev()
.removeClass(CLASSES.last)
.removeClass(CLASSES.lastCollapsable)
.removeClass(CLASSES.lastExpandable)
.find(">.hitarea")
.removeClass(CLASSES.lastCollapsableHitarea)
.removeClass(CLASSES.lastExpandableHitarea);
/*异步加载的形成树的主要部分*/
$(self).prepareBranchesForDF(settings).applyClasses(settings, $(this).data("toggler"));
//$(branches).find("li").andSelf().prepareBranches(settings).applyClasses(settings, $(this).data("toggler"));
$(self).prepareBranchesForAjax(settings);
}).bind("remove", function(event, branches) {
页面部分：(在这里我没有做分离，全部堆在了页面中)
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
<head>
<html:base />
<title>supplierSortAdd</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/treeview/jquery.treeview.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/treeview/demo/screen.css" />
<script src="${pageContext.request.contextPath}/treeview/lib/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/treeview/lib/jquery.cookie.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/treeview/jquery.treeview.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/treeview/jquery.treeview.edit.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#browser").treeview({control: "#treecontrol",persist: "cookie",cookieId: "#browser"});
/*笨重的cookie*/
var cookieContent = $.cookie("treeCookie");
if(cookieContent!=null && cookieContent.length>0){
$("#browser").append(cookieContent);
$("#browser").treeview();
}
/*ajax异步加载的设置*/
$.ajaxSetup({
async: false
});
$(".sort").click(function(){
var supplierSortId = $(this).attr("title");
var isOk = true;
var begin = "<ul>"
var end = "</ul>"
var content = "";
var haveContent = $("#browser").children("li").length;
if(haveContent<=0){
/*ajax部分我不做解释，我用的是最笨的方法,主要是treeview部分js的修改*/
$.post("supplierSortManager.jsp",{method:"findSorts",supplierSortId:supplierSortId,time:Math.random()},function(json){
if(json.isOk){
$.each(json.supplierSorts,function(i,supplierSort){
var contentList = "<li><span class='folder' title='"+supplierSort.supplierSortId+"'>"+supplierSort.supplierSortName+"</span></li>";
content+=contentList;
});
}else{
isOk = false;
}
},"json");
if(isOk){
var titleContent = content;
alert(titleContent);
$(titleContent).appendTo("#browser");
$("#browser").treeview({add:$(titleContent),self:$("#browser")});
}
}
/*方法本身的最外层，*/
cookieContent = $("#browser").html();
$.cookie("treeCookie",cookieContent);
});
/*接点的点击事件*/
$(".folder").live('click',function(){
var supplierSortId = $(this).attr("title");
var isOk = true;
var begin = "<ul>"
var end = "</ul>"
var content = "";
var haveContent = $(this).parent().children("ul").length;
/*没有子级查询数据库*/
if(haveContent<=0){
/*ajax部分我不做解释，我用的是最笨的方法,主要是treeview部分js的修改*/
$.post("supplierSortManager.jsp",{method:"findSorts",supplierSortId:supplierSortId,time:Math.random()},function(json){
if(json.isOk){
$.each(json.supplierSorts,function(i,supplierSort){
var contentList = "<li><span class='folder' title='"+supplierSort.supplierSortId+"'>"+supplierSort.supplierSortName+"</span></li>";
content+=contentList;
});
}else{
isOk = false;
}
},"json");
if(isOk){
var titleContent = begin+content+end;
var prentElement = $(this).parent();
$(titleContent).appendTo(prentElement);
$("#browser").treeview({add:$(titleContent),self:prentElement});
}
}
/*方法本身的最外层，cookie部分*/
cookieContent = $("#browser").html();
$.cookie("treeCookie",cookieContent);
});
})
</script>
</head>
<div class="dialogWin">
<h1 class="sort" title="1" style="margin:0;padding:0;cursor:pointer;">供应商分类</h1>
<ul id="browser" class="filetree">
</ul>
</div>
</body>
</html:html>
有待改进的部分：
1，接点展开折叠的cookie缓冲问题，(通过修改treeview的js代码)
分享到：
相关推荐
以上就是ASP.NET中实现TreeView异步加载的主要步骤和知识点。通过这种方式，我们可以构建一个既高效又用户友好的树形结构展示系统，尤其适用于处理大量或深度嵌套的数据。在实际应用中，还可以根据需求进行更复杂的...
本篇文章将深入探讨jQuery插件中的“TreeView”组件，特别是关于其异步加载树的实现。 TreeView是一种常见的UI元素，它通常用于展示层次结构的数据，如文件系统、组织结构等。在网页应用中，TreeView插件能够以树形...
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）中实现DataGrid的异步加载，采用MVVM（Model-View-ViewModel）设计模式。MVVM是一种流行的设计模式，它将用户界面（View）、业务逻辑...
1.节点是异步加载的（解决效率问题） 2.节点是无限级别的（递归的，这样可复用与目录结构、组织架构等数据类型） 3.节点是可以多选的（用CheckBox选择） 4.XAML方式绑定（减少UI上Code量） 5.方便得获取选中项信息
本项目在官方Bootstrap Treeview的基础上进行了扩展，实现了懒加载功能。这意味着当用户首次访问树形视图时，只会加载根节点，当用户展开某个节点时，该节点的子节点才会在后台请求数据并动态添加到视图中。这样，...
在本文中，我们将深入探讨如何在WPF应用中利用MVVM模式动态加载并管理TreeView，同时实现节点的重命名和右键菜单功能。WPF（Windows Presentation Foundation）是微软提供的一个用于构建桌面应用程序的框架，而MVVM...
在这个异步树实现中，我们专注于如何在jQuery Treeview中集成异步加载功能，特别是与.NET 3.5及以上版本的后端接口协同工作。 异步加载对于大型数据集至关重要，因为它允许用户逐步加载数据，而不是一次性加载所有...
"异步加载树节点"是一种策略，它允许我们分批次、按需地加载数据到TreeView中。当用户滚动或展开特定节点时，仅加载该节点及其子节点的相关数据。这样，只有在必要时才会请求服务器或数据库，减少对主线程的影响，...
在这个过程中，你可能还需要实现一个回调函数，以便在用户展开节点时异步加载子节点，以提高性能。这可以通过监听`TreeItem`的`expandedProperty()`并在`true`时触发加载逻辑来实现。 在Kx.java文件中，我们预计会...
在本示例中，我们关注的是树结构的异步加载，这是一种优化性能的技术，避免一次性加载大量数据导致页面响应缓慢。 异步加载，也称为懒加载或需求加载，意味着当用户滚动、展开节点或者进行其他交互时，只加载当前...
以上就是使用Java和Servlet实现jQuery Treeview异步加载树形菜单的基本步骤。这个过程中，关键在于后端提供数据服务和前端动态构建及插入树节点。通过这种方式，我们可以创建一个响应快速、用户体验优良的树形菜单，...
这个“listview水平滚动条 多级动态异步加载 TreeView 安卓程序demo”就是针对这种需求的一个实例，它展示了如何结合HorizontalScrollView来实现水平滚动，并且结合TreeView和多级动态异步加载技术，提高用户体验。...
Bootstrap Treeview是一款基于...通过这些步骤，你就可以实现一个功能完备的Bootstrap Treeview，它能够动态地从后台加载数据，并在用户交互时按需加载更多内容。这不仅提高了页面性能，也提供了良好的用户体验。
对于`Loader`，你可以通过监听其`status`属性的变化来实现异步加载： ```qml Loader { id: myLoader source: "MyComponent.qml" onStatusChanged: { if (status === Loader.Loaded) { console.log("Component...
例如，为了提高用户体验，可能会采用异步加载策略，只在需要时加载子节点，而不是一次性加载所有数据。此外，为了防止无限递归导致的栈溢出错误，递归函数需要有一个明确的退出条件。 总的来说，"无限递归treeview ...
在标题“Jquery TreeView支持大数据加载树”中，重点在于它能够处理大量数据，这通常涉及到异步加载或分页技术，以优化用户体验和提高性能。 jQuery TreeView的基本使用包括以下几个关键知识点： 1. **安装与引入*...
- 通常采用Ajax技术，在用户点击某个节点时，通过Ajax异步请求服务器端接口获取子节点数据，然后更新TreeView控件。 - 这种方式可以避免整个页面的重新加载，提供更好的用户体验。 #### 三、选中父节点和子节点...
对于大型数据集，为了提高用户体验，通常会采用异步加载策略。当用户展开节点时，才去后台加载其子节点。这可以通过`BeforeExpand`事件实现，使用`BeginInvoke`方法确保UI线程不会被阻塞。 6. **自定义节点** `...
1. **异步加载**：为了提高用户体验，避免一次性加载大量数据导致页面响应慢，动态加载通常采用异步方式。当用户滚动或点击某个节点时，通过Ajax请求获取需要的数据，然后在客户端动态添加到`treeview`中。 2. **...