dtree动态树+Javascript右键菜单（一）
1、从网上下载dtree控件。（好多地方都有的哦：P）
2、在Jbuilder中新建Web应用，命名为TreeLearing
3、解压缩dtree.rar包。
把dtree目录拷贝至TreeLearing应用中。
dtree目录下包括这些文件：example01.html 、 dtree.js 、 api.html 、 dtree.css 和img目录
注意：除了api.html之外，其它的文件都是必须拷贝的。只有这个api.html是对dtree控件的函数介绍。
4、复制example01.html，并把粘贴后的文件重命名为Tree.jsp
：） （保留原来的文件，以备参考是个好习惯哦~~）
注意dtree目录下的文件结构不要改变，否则树就不会正常显示
5、在Web应用中指定首页为Tree.jsp页面。
6、Tree.jsp中的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Destroydrop » Javascripts » Tree</title>
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
</head>
<body>
<h1><a href="/">Destroydrop</a> » <a href="/javascripts/">Javascripts</a> » <a href="/javascripts/tree/">Tree</a></h1>
<h2>Example</h2>
<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.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','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
d.add(11,9,'Mom\'s birthday','example01.html');
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
document.write(d);
//-->
</script>
</div>
<p><a href="mailto:drop@destroydrop.com">©2002-2003 Geir Landrö</a></p>
</body>
</html>
7、删除紫红色部分的代码，因为不需要哦。
8、注意看绿色和蓝色部分的代码，这才是真正为树添加节点的部分。
d.add(0,-1,'My example tree');
这一句为树添加了一个根节点，显示名称为'My example tree'
d.add(1,0,'Node 1','example01.html');
这一句在树的根节点下面添加了一个子节点。（d.add（）方法的参数具体含义可参见api.html文件）
常用的：
第一个参数，表示当前节点的ID
第二个参数，表示当前节点的父节点的ID
第三个参数，节点要显示的文字
第四个参数，点击该节点的超链接（注意也可以是某个servlet或是struts应用中的某个.do请求）
第五个参数，鼠标移至该节点时显示的文字
第六个参数，指定点击该节点时在哪个桢中打开超链接
……
9、运行应用程序。可以看到一棵漂亮的树。
OK，到现在为止，已经把dtree控件布署在自己的应用中，下一步就是对这棵树的改造，要从数据库中取数据，动态的生成这棵树。
dtree动态树+Javascript右键菜单（二）（实现动态树）：）
第一部分已经介绍过dtree的实现及布署方法，下面介绍从数据库中取数据动态生成树的方法。也是粉简单地说哦：）
1、既然是从数据库中取数据，首先需要建数据表，命名为TreeInfo。
可以参照dtree目录下的api.html文件中介绍的各个参数，来创建数据表
比如我的TreeInfo中包含如下字段：
CREATE TABLE TreeInfo (
nodeid number(10,0),
parentid number(10,0),
caption varchar(200),
nodeurl varchar(200),
target varchar(200),
tipinfo varchar(200),
icon varchar(200),
iconopen varchar(200),
isopen number(10,0))
2、在数据库中创建这样的表
写入几条数据：
insert into TreeInfo (nodeid, parentid, caption, nodeurl, target) values (1,0,'node 1','jsp1.jsp','mainFrame');
insert into TreeInfo (nodeid, parentid, caption, nodeurl, target) values (2,0,'node 1','jsp1.jsp','mainFrame');
insert into TreeInfo (nodeid, parentid, caption, nodeurl, target) values (3,1,'node 1','jsp1.jsp','mainFrame');
insert into TreeInfo (nodeid, parentid, caption, nodeurl, target) values (4,1,'node 1','jsp1.jsp','mainFrame');
insert into TreeInfo (nodeid, parentid, caption, nodeurl, target) values (5,2,'node 1','jsp1.jsp','mainFrame');
3、写一个类，把TreeInfo表中的数据取出来封装在一个TreeInfoVO类中。（该类为一个数据Bean），多条记录封装在一个ArrayList中。
4、修改TreeInfo.jsp页面
修改其中生成树的javascript代码：
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'IP地址段');
<%
IpSegmentBO ipsegmentBO = new IpSegmentBO();
TreeInfoVO TreeInfovo= new TreeInfoVO();
String sCaption = "";
String sTitle = "";
String sProperty = "";
int rowCnt = 0;
try{
ArrayList lTree = null;
rowCnt = ipsegmentBO.queryAllCount(); //取TreeInfo表中所有记录的个数
lTree = (ArrayList)ipsegmentBO.getVOListForPages(1,rowCnt); //取出TreeInfo表中所有记录
if (lTree != null){
for (int i = 0; i < lTree.size(); i++){
TreeInfovo = (TreeInfoVO) lTree.get(i);
sCaption = TreeInfovo.getName();
//name和title添加至树上时都不做字符类型转换。否则会在树节点上出现乱码
if (sCaption == null){
sCaption = "";
}
sTitle = TreeInfovo.getTitle();
if (sTitle == null){
sTitle = "";
}
sProperty = TreeInfovo.getProperty();
if (sProperty != null){
sProperty = new String(sProperty.getBytes("ISO8859_1"),"GB2312");
}else{
sProperty = "";
}
%>
d.add(<%=TreeInfovo.getSegmentid()%>,<%=TreeInfovo.getParentid()%>,
'<%=sCaption%>','<%=TreeInfovo.getUrl()%>',
'<%=sTitle%>','<%=TreeInfovo.getTarget()%>');
<%
}
}
}catch(Exception ex){
System.out.println(ex.toString());
}
%>
document.write(d);
//-->
</script>
5、重新运行应用程序，动态树显示出来。
第三步来实现Javascript的右键菜单的功能。
现状：
html页面的右键菜单不难加，比如常用的“复制”、“粘贴”、“刷新”等通用的操作可以做成页面的右键菜单，在页面点击右键时弹出这样的菜单。
比较少见的是，对于菜单上的不同对象或控件点击时，弹出的菜单内容不同，且点击后所做的操作不同。
解决：
1、对页面定义一个div，div中设置一个表格，表格中的各行即右键菜单的各个菜单项，比如“新增”、“删除”、“修改”等。
2、定义页面的右键弹出事件的javascript函数，在函数中设置body.innerHTML为该div的innerHTML，以此显示右键菜单。
3、对于页面的不同对象，设置不同的控制字符串，比如“101”，此字符串作为弹出事件javascript函数的参数，
在该函数中解析该字符串，动态控制div中表格不同行的显示与否。比如对于“101”，则显示“新增”和“修改”这两个菜单项。
下面具体实现啦：）
1、首先修改TreeInfo.jsp页面
在该页面的</body> 和 </html>之间添加如下html代码：
<!-- 右键开始 -->
<div id="itemMenu" style="display:none">
<table border="1" width="100%" bgcolor="#D0D0D0" style="border:thin" cellspacing="0">
<tr>
<td style="cursor:hand;border:outset 1;font-size:12px" align="left" οnclick="parent.addNode()">新增</td>
</tr>
<tr>
<td style="cursor:hand;border:outset 1;font-size:12px" align="left" οnclick="parent.delNode()">删除</td>
</tr>
<tr>
<td style="cursor:hand;border:outset 1;font-size:12px" align="left" οnclick="parent.updateNode()">更新</td>
</tr>
</table>
</div>
<!-- 右键结束 -->
到这里就定义了右键菜单中有三项：新增、删除、更新
2、定义页面的右键弹出事件的javascript函数
<script language="javascript">
//页面加载时调用此函数
function showMenu(id,temp) {
if(temp == "") { //默认点击页面空白处时的右键菜单
popMenu(itemMenu,110,"100"); //默认只显示“新增”菜单项
menuForm.addNode.value = "/ipmanage/addNode.jsp"; //注意ipmanage目录下需要已经创建了一个addNode.jsp页面
menuForm.delNode.value = "";
menuForm.updateNode.value = "";
}else{ //根据特定的字符串解析
var temparr = new Array();
temparr = temp.split(",");
menuForm.addNode.value = temparr[0];
menuForm.delNode.value = temparr[1];
menuForm.updateNode.value = temparr[2];
popMenu(itemMenu,110,id);
}
event.returnValue=false;
event.cancelBubble=true;
return false;
}
//弹出右键菜单
function popMenu(menuDiv,width,rowControlString)
{
//创建弹出菜单
var pop=window.createPopup();
//设置弹出菜单的内容
pop.document.body.innerHTML=menuDiv.innerHTML; //这句话控制了弹出菜单的html代码为定义右键菜单的div的html代码，即弹出时显示div中的表格
var rowObjs=pop.document.body.all[0].rows; //获得表格中的行对象
//获得弹出菜单的行数
var rowCount=rowObjs.length;
//循环设置每行的属性
for(var i=0;i<rowObjs.length;i++)
{
//如果设置该行不显示，则行数减一
var hide=rowControlString.charAt(i)!='1';
if(hide){
rowCount--;
}
//设置是否显示该行
rowObjs.style.display=(hide)?"none":"";
//设置鼠标滑入该行时的效果
rowObjs.cells[0].οnmοuseοver=function()
{
this.style.background="#E8E8E8";
this.style.color="blue";
}
//设置鼠标滑出该行时的效果
rowObjs.cells[0].οnmοuseοut=function(){
this.style.background="#D0D0D0";
this.style.color="black";
}
}
//屏蔽系统的Web页面本身的右键菜单
pop.document.οncοntextmenu=function() {
return false;
}
//选择右键菜单的一项后，菜单隐藏
pop.document.οnclick=function() {
pop.hide();
}
//显示右键菜单
pop.show(event.clientX-1,event.clientY,width,rowCount*20,document.body);
return true;
}
</script>
扫一扫
9088
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
