静态的dtree改编成动态dtree

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页面。

6Tree.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 &raquo; Javascripts &raquo; 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> &raquo; <a href="/javascripts/">Javascripts</a> &raquo; <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&#58;drop&#64;destroydrop&#46;com">&copy;2002-2003 Geir Landr&ouml;</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控件布署在自己的应用中,下一步就是对这棵树的改造,要从数据库中取数据,动态的生成这棵树。

待续…… ^_^

 

 

824

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、对页面定义一个divdiv中设置一个表格,表格中的各行即右键菜单的各个菜单项,比如新增删除修改等。

2、定义页面的右键弹出事件的javascript函数,在函数中设置body.innerHTML为该divinnerHTML,以此显示右键菜单。

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”,则表示第13行显示,第2行不显示
*/

function popMenu(menuDiv,width,rowControlString)
{
    //
创建弹出菜单

    var pop=window.createPopup();

    //设置弹出菜单的内容

    pop.document.body.innerHTML=menuDiv.innerHTML;   //这句话控制了弹出菜单的html代码为定义右键菜单的divhtml代码,即弹出时显示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>

 微笑转载别人的,希望能帮到那些想用到此类方法而又不知道该怎么用的新手们!!!

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值