纯CSS的ajax无限级html树速度超快

SuiKaSan的自学室

2011-11-16

关注关注

注意：已经迁移到https://github.com/jsvnadmin/jsvnadmin

源码下载http://jsvnadmin.googlecode.com/svn/trunk/

http://code.google.com/p/jsvnadmin/

不用脚本的树，使用纯粹html的<ul><li>，通过css显示为树。

加了段ajax脚本，使用jquery从后台获取数据，返回的是纯粹的现成的html，不需要使用js创建多余的对象。速度超快。

我还封装了ajax接口，树接口，节点接口等，可以实现把树配置在数据库，树还可以挂子树...每一层树都有对应的service服务层来获取数据，以达到无限的可能。

tree

|_tree

html树css树无限级html树ajax树，顶！！！

<html>

<head>
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript" src="treeview/treeview.js"></script>
<link type="text/css" rel="stylesheet" href="treeview/treeview.css"></link>
<script type="text/javascript">
<!--
AjaxTreeView.config.onclick=function(o,a){
	var p=o.getAttribute("param");if(p==null)p="";
	var url="/svnadmin/pjauth";
	if(url!=""){
	  if(p!=""){
		  if(url.indexOf("?")>0){
		  	url=url+"&"+p;
		  }else{
		  	url=url+"?"+p;
		  }
	   }
	   alert(url);
	   go(url,"pjauthWindow");
	   return false;
	}
};
//-->
</script>
</head>

<body>

<div style="width: 300px; height: 500px; overflow: auto;"
	class="filetree treeview">
	<ul>
		<li param="pj=projar&amp;path=/" treeid="rep" class="open lastopen">
			<div onclick="$att(this);" class="hit open-hit lastopen-hit"></div> <span
			onclick="$att(this);" class="folder"> <a onclick="$atc(this)"
				href="javascript:void(0);" id="rootlink">svn://127.0.0.1/projar/</a>
		</span>
			<ul>
				<li treeparentid="rep"
					class="closed">
					<div onclick="$att(this);" class="hit closed-hit"></div> <span
					onclick="$att(this);" class="folder"><a onclick="$atc(this)"
						href="javascript:void(0);">tabs</a></span>
				</li>
				<li treeparentid="rep"
					class="open lastopen"><div onclick="$att(this);"
						class="hit open-hit lastopen-hit"></div> <span
					onclick="$att(this);" class="folder"><a onclick="$atc(this)"
						href="javascript:void(0);">trunk</a></span>
					<ul>
						<li 							treeparentid="rep" class="closed"><div onclick="$att(this);"
								class="hit closed-hit"></div> <span onclick="$att(this);"
							class="folder"><a onclick="$atc(this)"
								href="javascript:void(0);">.myeclipse</a></span></li>
						<li treeparentid="rep"
							class="closed"><div onclick="$att(this);"
								class="hit closed-hit"></div> <span onclick="$att(this);"
							class="folder"><a onclick="$atc(this)"
								href="javascript:void(0);">.settings</a></span></li>
						<li treeparentid="rep"
							class="closed"><div onclick="$att(this);"
								class="hit closed-hit"></div> <span onclick="$att(this);"
							class="folder"><a onclick="$atc(this)"
								href="javascript:void(0);">resources</a></span></li>
						<li treeparentid="rep"
							class="closed"><div onclick="$att(this);"
								class="hit closed-hit"></div> <span onclick="$att(this);"
							class="folder"><a onclick="$atc(this)"
								href="javascript:void(0);">src</a></span></li>
						<li treeparentid="rep"
							class="closed"><div onclick="$att(this);"
								class="hit closed-hit"></div> <span onclick="$att(this);"
							class="folder"><a onclick="$atc(this)"
								href="javascript:void(0);">WebRoot</a></span></li>
						<li treeparentid="rep"
							class="closed"><div onclick="$att(this);"
								class="hit closed-hit"></div> <span onclick="$att(this);"
							class="folder"><a onclick="$atc(this)"
								href="javascript:void(0);">中文</a></span></li>
						<li><span
							class="file"><a onclick="$atc(this)"
								href="javascript:void(0);">.classpath</a></span></li>
						<li><span
							class="file"><a onclick="$atc(this)"
								href="javascript:void(0);">.mymetadata</a></span></li>
						<li class="last"><span
							class="file"><a onclick="$atc(this)"
								href="javascript:void(0);">.project</a></span></li>
					</ul></li>
			</ul>
		</li>
	</ul>
</div>

</body>

</html>

ajax css treeview