treeview的异步加载-CSDN博客

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代码)