利用Dtree实现树状结构 - html/css语言栏目：html-自学php网

利用Dtree实现树状结构 - html/css语言栏目：html

来源：自学PHP网时间：2015-04-14 14:50 作者：阅读:次

[导读] 今天闲着没事，就用Dtree写了一直想写的树状结构，虽然网上代码很多，但大多数都解释的不太清楚。所以我决定把它的使用详细的解释一遍。看具体实例：目录的结构：(注意：img目录...

今天闲着没事，就用Dtree写了一直想写的树状结构，虽然网上代码很多，但大多数都解释的不太清楚。

所以我决定把它的使用详细的解释一遍。

看具体实例：

目录的结构：(注意：img目录和test.html文件必须在同一级目录下，且名字为img) (如果不想使用img作为目录名就请自行到dtree.js中更改！)

test.html的代码如下：

[html]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>js+css实现树状结构</title>

</head>

<body>

d = new dTree("d");//创建新的d对象

d.config.useCookies = false; //不使用cookies

//d.config.useStatusText = true; //状态栏显示文本

d.config.closeSameLevel = false; //不关闭同一层次其他节点

//d.add(id,pid,name,url,title,target);

//id:编号 pid:父节点 name:名称 url:url地址 title:标题 target:跳转框架 mainFrame表示在新的页面打开

//root结点

d.add(0, -1, "张成金","http://www.baidu.com","张成金");

//一级结点

d.add(1, 0, "张成金", "http://www.baidu.com", "张成金", "mainFrame");

d.add(2, 0, "张成金", "http://www.baidu.com", "张成金", "mainFrame");

d.add(3, 0, "张成金", "http://www.baidu.com", "张成金", "mainFrame");

d.add(4, 0, "张成金", "http://www.baidu.com", "张成金", "mainFrame");

d.add(5, 0, "张成金", "http://www.baidu.com", "张成金", "mainFrame");

d.add(6, 0, "张成金", "http://www.baidu.com", "张成金", "mainFrame");

d.add(7, 0, "张成金", "http://www.baidu.com", "张成金", "mainFrame");

//二级结点

d.add(11, 1, "张成金", "http://www.baidu.com", "张成金");

d.add(12, 1, "张成金", "http://www.baidu.com", "张成金");

d.add(21, 2, "张成金", "http://www.baidu.com", "张成金");

d.add(22, 2, "张成金", "http://www.baidu.com", "张成金");

d.add(31, 3, "张成金", "http://www.baidu.com", "张成金");

d.add(32, 3, "张成金", "http://www.baidu.com", "张成金");

d.add(41, 4, "张成金", "http://www.baidu.com", "张成金");

d.add(42, 4, "张成金", "http://www.baidu.com", "张成金");

d.add(43, 4, "张成金", "http://www.baidu.com", "张成金");

d.add(44, 4, "张成金", "http://www.baidu.com", "张成金");

d.add(45, 4, "张成金", "http://www.baidu.com", "张成金");

d.add(51, 5, "张成金", "http://www.baidu.com", "张成金");

d.add(52, 5, "张成金", "http://www.baidu.com", "张成金");

d.add(61, 6, "张成金", "http://www.baidu.com", "张成金");

d.add(62, 6, "张成金", "http://www.baidu.com", "张成金");

d.add(63, 6, "张成金", "http://www.baidu.com", "张成金");

d.add(64, 6, "张成金", "http://www.baidu.com", "张成金");

d.add(65, 6, "张成金", "http://www.baidu.com", "张成金");

d.add(66, 6, "张成金", "http://www.baidu.com", "张成金");

d.add(71, 7, "张成金", "http://www.baidu.com", "张成金");

document.write(d);//输出

d.openAll();//把所有结点都打开

</script>

</body>

</html>