dtree通过数据库动态生成树 .

wang_zhi_peng2007

于 2013-11-21 23:31:39 发布

阅读量562

点赞数

CC 4.0 BY-SA版权

分类专栏：前端_JavaScript 文章标签：数据库 matlab javascript ViewUI

本文链接：https://blog.youkuaiyun.com/wang_zhi_peng2007/article/details/84505933

前端_JavaScript 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了dtree组件的用法、配置及样式应用，包括节点添加、默认值设定、样式表引用和页面代码书写等。通过具体实例展示了如何在网页中构建目录树，并提供了动态代码实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.先来介绍一下. dtree 的用法.(我引用了以前我收集的一篇文章.还比较详细,出处不记得啦).文章下面会附带dtree用法的例子.

Dtree目录树的总结

一：函数

                           1：页面中
                              tree.add(id,pid,name,url,title,target,icon,iconOpen,open);
                                  参数说明：
                                              id         ：节点自身的id
                                              pid       ：节点的父节点的id
                                              name    ：节点显示在页面上的名称
                                              url        ：节点的链接地址
                                              title      ：鼠标放在节点上所出现的提示信息
                                              target   ：节点链接所打开的目标frame(如框架目标mainFrame,_blank,_self 类)
                                              icon      ：节点关闭时的显示图片的路径
                                              iconOpen：节点打开时的显示图片的路径
                                              open    ：布尔型，节点是否打开（默认为false）
                                             注：open项：顶级节点一般采用true，即pid是－1的节点

2：dtree.js文件中
约87－113行是一些默认图片的路径，注意要指对。

二：页面中的书写
          1：默认值的书写规则（从左至右，依次省略）
                          即 tree.add(id,pid,name,url);后面5个参数可以省略
          2：有间隔时的默认值（如存在第6个参数，但第5个参数想用默认值）
                         即 tree.add(id,pid,name,url,"",target);必须这样写
         3：样式表
           （1）：可以将dtree.css中的样式附加到你的应用中的主css中，如a.css
           （2）：也可以同时引用dtree.css与a.css两个文件，但前提条件是两个css文件中不能有重复的样式

<link href="/jingjindatabase/pub/css/a.css" rel="stylesheet" type="text/css" />  
<link href="/jingjindatabase/pub/css/dtree.css" rel="stylesheet" type="text/css" />

4：页面代码书写的位置是：一般写在表格的td之中

<script type="text/javascript" src="/myMobanGis/pub/js/dtree.js"></script>   
<script type="text/javascript">   
tree = new dTree('tree');   
tree.add("1","-1","京津","","","","","",true);   
tree.add("11","1","A","","","","","",true);   
tree.add("110","11","A-1","content.jsp?moduleName=XXX","","mainFrame");   
tree.add("111","11","A-2","javascript:void(0)","","链接在哪里显示");   
tree.add("112","11","A-3","javascript:void(0)","","mainFrame");   
tree.add("113","11","A-4","/.jsp","","mainFrame");   
tree.add("114","11","A-5","/.jsp","","mainFrame");   
tree.add("115","11","A-6","/.jsp","","mainFrame");   
    
tree.add("12","1","B","","","","","",true);   
tree.add("121","12","B-1","javascript:调用本页内的js函数","","mainFrame");   
tree.add("122","12","B-2");   
tree.add("13","1","C","","","","","",true);   
tree.add("131","13","C-1","javascript:void(0)","","mainFrame");   
tree.add("132","13","C-2","javascript:void(0)","","mainFrame");   
tree.add("133","13","C-3","javascript:void(0)","","mainFrame");   
tree.add("14","1","D","","","","","",true);   
tree.add("141","14","D-1","javascript:void(0)","","mainFrame");   
document.write(tree);   
</script>

说明：这是静态的代码，动态的可用循环加入。其他 tree.add(id,pid,name,url,"","","","",true);

三：css文件的注解
1:dtree.css

.dtree {//定义目录树节点的字体，字号，颜色   
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;   
 font-size: 12px;   
 color: #006600;   
 white-space: nowrap;   
}   
.dtree img {//定义选用节点图标的样式，位置   
 border: 0px;   
 vertical-align: middle;   
}   
.dtree a {//   
color: #006600;   
 text-decoration: none;   
}   
.dtree a.node, .dtree a.nodeSel {   
 white-space: nowrap;   
 padding: 0px 0px 0px 0px;   
}   
.dtree a.node:hover, .dtree a.nodeSel:hover {   
color: #006600;   
text-decoration: none;   
}   
.dtree a.nodeSel {   
background-color: #c0d2ec;   
}   
.dtree .clip {   
 overflow: hidden;   
}

1.a = new dTree('a');   
2.a.config.useStatusText=true;   
3.a.config.closeSameLevel=true;   
4.a.config.useCookies=false;   
5.a.add(0,-1,'Tree example','javascript: void(0);');   
6.a.add(1, 0,'Node 1','javascript:void(0);');   
7.a.add(2, 1,'Node 2','javascript:void(0);');   
8.a.add(3, 1,'Node 3','javascript:void(0);');   
9.a.add(4, 0,'Node 4','javascript:void(0);');   
10.a.add(5, 4,'Node 5','javascript:void(0);');   
11.a.add(6, 4,'Node 6','javascript:void(0);');   
12.a.add(7, 2,'Node 7','javascript:void(0);');   
13.a.add(8, 6,'Node 8','javascript:void(0);');   
14.a.add(9, 1,'Node 9','javascript:void(0);');   
15.a.add(10, 2,'Node 10','javascript:void(0);');   
16.a.add(11, 8,'Node 11','javascript:void(0);');   
17.a.add(12, 2,'Node 12','javascript:void(0);');   
18.a.add(13, 9,'Node 13','javascript:void(0);');   
19.a.add(14, 4,'Node 14','javascript:void(0);');   
20.a.add(15, 2,'Node 15','javascript:void(0);');   
21.a.add(16, 1,'Node 16','javascript:void(0);');   
22.a.add(17, 4,'Node 17','javascript:void(0);');   
23.a.add(18, 6,'Node 18','javascript:void(0);');   
24.a.add(19, 7,'Node 19','javascript:void(0);');   
25.document.write(a);

tree2.jsp demo中的一个jsp页面. 静态的生成一棵树. (二级节点)

1.<%@ page language="java" pageEncoding="utf-8"%>   
2.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
3.<html>   
4.    <head>   
5.        <title>树形结构_____普通生成树的方式</title>   
6.        <link rel="stylesheet" href="dtree.css" type="text/css"></link>   
7.        <script type="text/javascript" src="dtree.js"></script>   
8.        <script>   
9.               /*     
10.                    tree.add(id,pid,name,url,title,target,icon,iconOpen,open);  
11.                    id        ：节点自身的id  
12.                    pid       ：节点的父节点的id  
13.                    name      ：节点显示在页面上的名称  
14.                    url       ：节点的链接地址  
15.                    title     ：鼠标放在节点上所出现的提示信息  
16.                    target    ：节点链接所打开的目标frame（如框架目标mainFrame或是_blank,_self之类）  
17.                    icon      ：节点关闭时的显示图片的路径  
18.                    iconOpen  ：节点打开时的显示图片的路径  
19.                    open      ：布尔型，节点是否打开（默认为false）  
20.                    ------------------------------------------------  
21.                    东城区、西城区、崇文区、宣武区、朝阳区、丰台区、石景山区、  
22.                    海淀区、门头沟区、房山区、通州区、顺义区、 昌平区、  
23.                   大兴区、怀柔区、平谷区 、 密云县、延庆县  
24.                   ------------------------------------------------  
25.                */  
26.        </script>   
27.                <script type="text/javascript">   
28.                 tree = new dTree('tree');//创建一个对象.   
29.                 tree.add("1","-1","中国","","","","","",false);   
30.                 tree.add("11","1","北京","","","","","",false);   
31.                 tree.add("110","11","东城区","连接地址可以从数据库里面动态查询出来..","东城区","打开目标位置");   
32.                 tree.add("111","11","西城区","连接地址可以从数据库里面动态查询出来..","","链接在哪里显示");   
33.                 tree.add("112","11","崇文区","连接地址可以从数据库里面动态查询出来..","","mainFrame");   
34.                 tree.add("113","11","宣武区","","","_blank");   
35.                 tree.add("114","11","朝阳区","/.jsp","","mainFrame");   
36.                 tree.add("115","11","丰台区","/.jsp","","mainFrame");   
37.                 tree.add("116","11","石景山区","/.jsp","","mainFrame");   
38.                 tree.add("117","11","海淀区","/.jsp","","mainFrame");   
39.                 tree.add("118","11","门头沟区","/.jsp","","mainFrame");   
40.                 tree.add("119","11","房山区","/.jsp","","mainFrame");   
41.                 tree.add("120","11","通州区","/.jsp","","mainFrame");   
42.                 tree.add("121","11","顺义区","/.jsp","","mainFrame");    
43.                 tree.add("122","11","昌平区","/.jsp","","mainFrame");   
44.                 tree.add("123","11","大兴区","/.jsp","","mainFrame");   
45.                 tree.add("124","11","怀柔区","/.jsp","","mainFrame");   
46.                 tree.add("125","11","平谷区","/.jsp","","mainFrame");   
47.                 tree.add("126","11","延庆县","/.jsp","","mainFrame");   
48.                 tree.add("127","11","密云县","/.jsp","","mainFrame");   
49.                 //==================================================   
50.                 tree.add("12","1","湖南","","","","","",false);   
51.                 tree.add("121","12","株洲","javascript:调用本页内的js函数","","mainFrame");   
52.                 tree.add("122","12","长沙");   
53.                //====================================================   
54.                 tree.add("13","1","湖北","","","","","",false);   
55.                 tree.add("131","13","武汉","javascript:void()","","mainFrame");   
56.                 tree.add("132","13","宜昌","javascript:void()","","mainFrame");   
57.                 tree.add("133","13","孝感","javascript:void()","","mainFrame");   
58.                 //===================================================      
59.                 tree.add("14","1","广东","","","","","",false);   
60.                 tree.add("141","14","佛山","javascript:void()","","mainFrame");   
61.                 document.write(tree);   
62.                </script>   
63.    </head>   
64.    <body>   
65.    </body>   
66.</html>

创建表.tree_table

tree_table  CREATE TABLE `tree_table` (                       
              `id` int(11) NOT NULL auto_increment,           
              `nodeId` varchar(12) NOT NULL  ,       
              `parentId` varchar(12) NOT NULL  ,     
              `hrefAddress` varchar(85)  ,           
              `nodeName` varchar(20)  ,              
              PRIMARY KEY  (`id`)                             
            ) ENGINE=InnoDB DEFAULT CHARSET=gbk