日期:2014-05-16  浏览次数:20454 次

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

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;   
}   
.dt