用dTree實現樹

項目中的應用,用網上的dTree實現的一棵目錄樹,效果圖如下,所需引入的文件都可在網上找到,dTree實現無限級樹,感覺效果非常漂亮。

[img]http://dl.iteye.com/upload/attachment/195682/242c8d05-6e1e-3c95-b592-45da8523b3fa.jpg[/img]

jsp頁面代碼:

<%@ page contentType="text/html;charset=GBK" %>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>目錄樹</title>
<link href="tree.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
</head>

<body >  

<div width="100%">
<script type="text/javascript">
var d = new dTree('d');
d.config.showInvalid = true;
d.config.filter = true;
d.config.target = "contentFrame";
d.config.closeSameLevel = false;
d.config.useStatusText = true;

d.add('0', '-1', '世界在我心中', '#', '世界在我心中', null, null, null, false, false, false, true, false);
d.add('1', '0', '美國', '#', '美國', null, null, false, false, false, true, false);
d.add('11', '1', '洛杉磯', '#', '洛杉磯', null, null, false, false, false, true, false);
d.add('12', '1', '紐約', '#', '紐約', null, null, false, false, false, true, false);


d.add('2', '0', '中國', '#', '中國', null, null, false, false, false, true, false);
d.add('21', '2', '廣東省', '#', '廣東省', null, null, false, false, false, true, false);
d.add('211', '21', '廣州市', '#', '廣州市', null, null, false, false, false, true, false);
d.add('2111', '211', '天河區', '#', '天河區', null, null, null, false, false, false, true, false);
d.add('21111', '2111', '獵德', '#', '獵德', null, null, null, false, false, false, true, false);
d.add('21112', '2111', '員村', '#', '員村', null, null, null, false, false, false, true, false);


d.add('2112', '211', '白雲區', '#', '白雲區', null, null, null, false, false, false, true, false);
d.add('2113', '211', '越秀區', '#', '越秀區', null, null, null, false, false, false, true, false);
d.add('212', '21', '深圳市', '#', '深圳市', null, null, false, false, false, true, false);
d.add('2121', '212', '南山區', '#', '南山區',null, null, null, false, false, false, true, false);
d.add('2122', '212', '福田區', '#', '福田區',null, null, null, false, false, false, true, false);

d.add('22', '2', '浙江省', '#', '浙江省', null, null, false, false, false, true, false);
d.add('221', '22', '南京市', '#', '南京市', null, null, false, false, false, true, false);
d.add('2211', '221', '某區', '#', '某區', null, null, null, false, false, false, true, false);
d.add('222', '22', '杭州市', '#', '杭州市', null, null, false, false, false, true, false);

d.add('23', '2', '湖南省', '#', '湖南省', null, null, false, false, false, true, false);


d.closeAll();
//############生成樹################
document.write(d);
//############生成樹################


</script>
</div>
</body></html>


或者可以參考這位仁兄的文章
[u]http://www.cnblogs.com/liuweijing/articles/908012.html[/u]
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章