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请求)
第五个参数,鼠标移至该节点时显示的文字
第六个参数,指定点击该节点时在哪个桢中打开超链接
……
dtree d的9个属性:
ID:主键(int)
PID:父类ID (int),当设置为-1时表示父节点
NAME:结点名称 (String)
URL:结点连接的URL (String)
TITLE:类似ALT的一种结点显示内容 (String)
TARGET:连接打开的目标 (String)
ICON:图片文件,没有指定将使用默认的图片 (String)
ICONOPEN:打开结点后的图片文件,没有指定将使用默认的图片 (String)
OPEN:boolean类型,结点是否打开
9、运行应用程序。可以看到一棵漂亮的树。
OK,到现在为止,已经把dtree控件布署在自己的应用中,下一步就是对这棵树的改造,要从数据库中取数据,动态的生成这棵树。
待续…… ^_^
8月24日
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、重新运行应用程序,动态树显示出来。
dtree动态树+Javascript右键菜单(三)
第三步来实现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;
}
//弹出右键菜单
/**
*显示弹出菜单
*menuDiv:右键菜单的内容
*width:行显示的宽度
*rowControlString:行控制字符串,0表示不显示,1表示显示,如“101”,则表示第1、3行显示,第2行不显示
*/
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[i].style.display=(hide)?"none":"";
//设置鼠标滑入该行时的效果
rowObjs[i].cells[0].οnmοuseοver=function()
{
this.style.background="#E8E8E8";
this.style.color="blue";
}
//设置鼠标滑出该行时的效果
rowObjs[i].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>
转载别人的,希望能帮到那些想用到此类方法而又不知道该怎么用的新手们!!!