jquery 树型插件 -- jquery.treeview
1. 地址：
http://dev.jquery.com/browser/trunk/plugins/treeview
可以下载 jquery.treeview.zip，其中包含了jquery.treeview.js 和压缩版，还有例子。
2. 起步
自带的例子页面中有三个例子，比较长，我只试验第一个。
在解压后的目录中建测试页面，并把 jquery.js 也考到这个目录
代码：
//treetest.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script src="jquery-1.1.2.pack.js"
type="text/javascript"></script>
<script src="jquery.treeview.pack.js"
type="text/javascript"></script>
<style type="text/css">
.treeview, .treeview ul {
padding: 0;
margin: 0;
list-style: none;
}
.treeview li {
margin: 0;
padding: 4px 0 3px 20px;
}
.treeview li {
background:url(images/tv-item.gif) 0 0 no-repeat;}
.treeview .collapsable {
background-image: url(images/tv-collapsable.gif);}
.treeview .expandable {
background-image: url(images/tv-expandable.gif);}
.treeview .last {
background-image: url(images/tv-item-last.gif);}
.treeview .lastCollapsable {
background-image:
url(images/tv-collapsable-last.gif); }
.treeview .lastExpandable {
background-image:
url(images/tv-expandable-last.gif); }
</style>
<script type="text/javascript">
function test(){
$("#tree_container ul").Treeview();
}
</script>
</HEAD>
<BODY>
<div id="">
<input type="button" name="ttt" value="ttt"
onclick="test()"/>
</div>
<div id="tree_container">
<ul>
<li>Item 1
<ul>
<li>Item 1.1</li>
</ul>
</li>
<li class="closed">Item 2 (starts closed)
<ul>
<li>Item 2.1
<ul>
<li>Item 2.1.1</li>
<li>Item 2.1.2</li>
</ul>
</li>
<li>Item 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</div>
</BODY>
</HTML>
点击按钮后，普通的项目列表就转换成了相同结构的树，很方便。
他默认状态下树是展开的，如果想是闭合的就要像“Item 2”一样，给li加"closed"样式。
3. 实例
我的应用场景：从服务器取得Document对象，页面以树形结构显示，默认闭合，点击某个节点就把其值传给目标输入框
Document 结构：
<root>
<001 name="c001">
<0001 name="c0001"/>
<0002 name="c0002"/>
</001>
</root>
标签的name属性值为页面上显示的，标签名为实际的值。
//参数data为传回的Document
function callback(data){
//取得树的显示区域根节点
var container = document.
getElementById("container");
//先清理此节点
removeChild(container);
//取得Document中根节点，
//注意firefox下可能要取[0];
var root = data.childNodes[1];
//遍历Document，构造项目列表，
//"ul"表示子树，"li"表示具体条目
recur_travel(root, container);
//调用jquery.treeview 构造树
$("#container ul").Treeview();
}
//遍历Document，构造项目列表
function recur_travel(node, parentItem){
for(var i=0; i<node.childNodes.length; i++){
var name = node.childNodes<i>.
attributes[0].value;
var value = node.childNodes<i>.tagName;
//建立新节点"ul"
var ulNode = createElement("ul");
//建立新节点"li"
var liNode = createElement("li");
liNode.id = value;
liNode.className = "closed";
//returnTreeValue函数
//用于返回选定节点的值给目标输入框
liNode.innerHTML = "<a href='####'
onclick='returnTreeValue(this)'>" + name
+ "</a>";
ulNode.appendChild(liNode);
parentItem.appendChild(ulNode);
//递归子节点
recur_travel(node.childNodes<i>, liNode);
}
}
irini
2007-06-14 21:52:00
评论:3
阅读:1740
引用:0
无题
@2008-09-04 19:12:59
这段代码很有用，只是需要自己改改。
@2008-06-12 16:08:38 游客
这个例子写完后不能正常运行啊，请指点下吧 谢谢
@2008-06-12 10:47:11 游客
removeChild(container);为什么这行总是报错啊