DTree

Dtree所引用的css

一：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;//表格随着文字自动伸展（如果未设置TD宽度，则noWrap属性是起作用的；如果设置了TD宽度，则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;

}

  

二：tree.css

body {SCROLLBAR-FACE-COLOR:#D2FFD2;

SCROLLBAR-HIGHLIGHT-COLOR: #8AA583;

SCROLLBAR-SHADOW-COLOR: #8AA583;

SCROLLBAR-3DLIGHT-COLOR: #ffffff;

SCROLLBAR-ARROW-COLOR: #8AA583;

SCROLLBAR-TRACK-COLOR: #E1FFE1;

SCROLLBAR-DARKSHADOW-COLOR:  #ffffff;

       background-attachment: fixed;

//scroll : 　背景图像是随对象内容滚动

//fixed : 　背景图像固定

       background-repeat: no-repeat;

//background-repeat : repeat | no-repeat | repeat-x | repeat-y

//repeat : 　背景图像在纵向和横向上平铺

//no-repeat : 　背景图像不平铺

//repeat-x : 　背景图像在横向上平铺

//repeat-y : 　背景图像在纵向平铺

       background-color: EFF7F7;

}

 

 

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);必须这样写

其他 tree.add(id,pid,name,url,"","","","",true);

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>

 说明：这是静态的代码，动态的可用循环加入。