利用Dtree实现树状结构

当前位置 : 首页 > 网页制作 > CSS > 利用Dtree实现树状结构

利用Dtree实现树状结构

来源: 作者: 时间:2016-02-17 10:24
今天闲着没事,就用Dtree写了一直想写的树状结构,虽然网上代码很多,但大多数都解释的不太清楚。所以我决定把它的使用详细的解释一遍。看具体实例:目录的结构:(注意:img目录
今天闲着没事,就用Dtree写了一直想写的树状结构,虽然网上代码很多,但大多数都解释的不太清楚。
 
所以我决定把它的使用详细的解释一遍。
 
看具体实例:
 
目录的结构:(注意:img目录和test.文件必须在同一级目录下,且名字为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">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>js+css实现树状结构</title>  
   <!-- css文件(*必须)-->  
    <link type="text/css" rel="Stylesheet" href="css/dtree.css" />  
    <!--js文件(*必须)-->  
    <script type="text/javascript" src="js/dtree.js"> </script>  
</head>  
<body>  
<script type="text/javascript">  
    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>  
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>js+css实现树状结构</title>
   <!-- css文件(*必须)-->
    <link type="text/css" rel="Stylesheet" href="css/dtree.css" />
    <!--js文件(*必须)-->
    <script type="text/javascript" src="js/dtree.js"> </script>
</head>
<body>
<script type="text/javascript">
    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>
 
效果图: 
\
 
 
 
Tag:
网友评论

<