前言:
该例子就是个框架导航 , 左边包含dtree的框架,点击上面的节点右边框架显示
说明步骤:
1. 首先获得dtree http://www.destroydrop.com/javascripts/tree/
2. 使用dtree
2.1 导入dtree.css dtree.js
<link rel="StyleSheet" href="dtree.css" type="text/css"/>
<script type="text/javascript" src="dtree.js"></script>
3. 关键代码
3.1 大的框架代码:
<frameset rows="20%,60%,20%">
<frame src="/hr/SystemManager/top.html">
<frameset cols="20%,80%">
<frame src="/hr/SystemManager/left.html" name="leftFrame" >
<frame src="/hr/SystemManager/right.html" name="rightFrame" >
</frameset>
<frame src="/hr/SystemManager/foot.html">
</frameset>
3.1 dtree的代码
<script type="text/javascript">
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','top.html');
d.add(2,0,'Node 2','top.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,0,'Node 3','example01.html');
//d.add(5,3,'Node 1.1.1','top.html','top',' ','img/imgfloder.gif');
d.add(5,4,'1','/hr/failure.jsp','','parent.rightFrame'); //在mainFrame框架内显
d.add(5,3,'点击我','javascript:junploaction()',"",'');
document.write(d);
</script>
<script>
function junploaction()
{
parent.rightFrame.location="left.html";
}
</script>
更详细的请看dtree.zip中的资料 希望对大家有所有小帮助
图片演示 :
点击之后的图片
dtree 递归思考:
dTree.prototype.selectCheckbox=function(nodeId){ var flag = 0; var temp ; var cs = document.getElementById("c"+this.obj+nodeId).checked; var node = this.aNodes[nodeId]; var len =this.aNodes.length; var same = []; for (n=0; n<len; n++) { if(node.pid==this.aNodes[n].pid){ same[same.length] = n; } if ((this.aNodes[n].pid == node.id)) { document.getElementById("c"+this.obj+n).checked=cs; flag = 1; this.selectCheckbox(n); } } if(flag==0){ temp = n; //查找同级节点 //alert(same); for(j=0;j<same.length;j++){ document.getElementById("c"+this.obj+(same[j])).checked=true; } //alert("终止"+this.aNodes[nodeId].name); }
相关推荐
dtree 使用详细介绍,开发使用好帮手!
dtree使用说明及示例演示
一个简单的文档,里面记录了dtree的使用方法
这段时间公司要做一个树,我在网上查了很多关于树的资料,最后选择了dtree,感觉他小巧,而且还挺耐看,但是不支持动态加载,添加,修改,删除,于是自己在网上查资料,也参考别人的,也自己写了一些,最终终于是的...
树的展现有很多中 这里是dtree类库,展现tree,
NULL 博文链接:https://goowolf.iteye.com/blog/520959
dtree+jquery+oracle+tomcat 从oracle数据库中取出dtree的节点信息,在jsp页面使用jquery动态生成带checkBox的dtree 测试时请访问main.jsp WebRoot/db目录为数据库建表脚本;
轻量级js tree的使用, 详细的内容请看文档 详细的内容请看文档
这是一个关于Dtree非常简单的JSP入门应用实例. PS:建议不要下..因为只是个人的一些小玩意而已
目前有很多的树形菜单组件(比如ext),dtree是一种简单易懂的js组件, 不需要复杂的操作即可生产,同时支持动态从数据库引入数据 解压后有以下几部分: img文件夹: 包含树形菜单显示需要的图标 api.html : 作者写...
dtree,jsp中使用,很简单,有引用的js,有图片
dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar dtree.rar
DTree的改进与使用经验,使用dtree必须要了解的事!
dtree所需要的dtree.css和dtree.js文件,包含小图标和API以及案例
如何使用DTREE构建树菜单,包括构建动态树和静态树
树形菜单,各种各样的dtree使用,包含框架的(ssh)和非框架,动态的,和非动态的。使用起来非常方便快捷,是较好的资源!
本人抄袭加改良了一个dtree在jsp中的使用,和大家分享,简单的构建一个树形菜单dtree还是不错的选择。
其中包含了对dtree的解读文件和我自己的使用案例(usertree.html)。希望能够帮到大家。