[网络收集]dtree动态树+Javascript右键菜单

最新推荐文章于 2021-02-07 21:51:08 发布

weixin_30378623

最新推荐文章于 2021-02-07 21:51:08 发布

阅读量113

点赞数

文章标签： javascript xhtml 数据库 ViewUI

原文链接：http://www.cnblogs.com/lushuicongsheng/archive/2010/11/09/1872506.html

版权

dtree动态树+Javascript右键菜单（一）
注：先看效果，不行了你就不用看，免得浪费大家的时间。行了你再看。

1、从网上下载dtree控件。下面是dtree的下载地址http://destroydrop.com/javascripts/tree/
2、解压缩dtree.rar包。
    把dtree目录下的dtree.js 拷贝至scripts文件中、
    dtree.css 拷贝至styles文件中、
    img文件和example01.html拷贝至工程根目录下。
    注意：除了api.html之外，其它的文件都是必须拷贝的。只有这个api.html是对dtree控件的函数介绍。
3、将example01.html文件重命名为Tree.jsp

4、在Web应用中指定首页为Tree.jsp页面。
5、Tree.jsp中的代码如下：

 
     01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
     02<html>
 
     03<head>
 
     04<title>Destroydrop &raquo; Javascripts &raquo; Tree</title>
 
     05<link rel="StyleSheet" href="styles/dtree.css" type="text/css" />
 
     06<script type="text/javascript" src="scripts/dtree.js"></script>
 
     07</head>
 
     08<body>
 
     09<div class="dtree">
 
     10<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
 
     11<script type="text/javascript">
 
     12<!--
 
     13d = new dTree('d'); 
 
     14 
 
     15d.add(0,-1,'后台管理'); 
 
     16 
 
     17d.add(1,0,'welcom','wel','权限管理'); 
 
     18 
 
     19d.add(2,1,'welcom','wel','<a href=javascript:clickMenu(); oncontextmenu=showMenu("a8a0d9175219a593801219a5efbff0002")>用户管理</a>'); 
 
     20 
 
     21d.add(3,2,'welcom','wel','<a href=javascript:clickMenu(); oncontextmenu=showMenu("8a0d9156219a71a201219a73422e0001")>角色管理</a>'); 
 
     22 
 
     23d.add(4,2,'welcom','wel','<a href=javascript:clickMenu(); oncontextmenu=showMenu("8a0d9156219a5a9901219a61df120003")>功能管理</a>'); 
 
     24 
 
     25d.add(5,2,'welcom','wel','<a href=javascript:clickMenu(); oncontextmenu=showMenu("8a0d9156219a5a9901219a5d62f00002")>用户角色分配</a>'); 
 
     26 
 
     27d.add(6,2,'welcom','wel','<a href=javascript:clickMenu(); oncontextmenu=showMenu("8a0d9156219a5a9901219a5ce5730001")>角色功能分配</a>'); 
 
     28 
 
     29document.write(d);
 
     30//-->
 
     31</script>
 
     32</div>
 
     33</body>
 
     34</html>

6、注意以下的代码，这才是真正为树添加节点的部分。
    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请求）
    第五个参数，鼠标移至该节点时显示的文字
    第六个参数，指定点击该节点时在哪个桢中打开超链接
    ……
6、运行应用程序。可以看到一棵漂亮的树。
注：如果你要修改树形图片，可以到scripts/dtree.js文件中修改从44行到57行图片路径。

dtree动态树+Javascript右键菜单（二）(实现动态树):
以下是从数据库中取出数据动态生成树的方法：

1、首先需要建数据表，命名为TreeInfo。
可以参照dtree目录下的api.html文件中介绍的各个参数，来创建数据表
比如我的TreeInfo中包含如下字段：

 
     01CREATE TABLE TreeInfo (
 
     02    nodeid               number(10,0),
 
     03    parentid             number(10,0),
 
     04    caption              varchar(200),
 
     05    nodeurl              varchar(200),
 
     06    target               varchar(200),
 
     07    tipinfo               varchar(200),
 
     08    icon                  varchar(200),
 
     09    iconopen            varchar(200),
 
     10    isopen               number(10,0))

//注：parentid我用的是自身关联nodeid
2、在数据库中创建这样的表
写入几条数据：

 
     1insert into TreeInfo (nodeid, parentid, caption, nodeurl, target) values (1,0,'权限管理','jsp1.jsp','mainFrame');
 
     2insert into TreeInfo (nodeid, parentid, caption, nodeurl, target) values (2,1,'用户管理','user.jsp','mainFrame');
 
     3insert into TreeInfo (nodeid, parentid, caption, nodeurl, target) values (3,2,'角色管理','role.jsp','mainFrame');
 
     4insert into TreeInfo (nodeid, parentid, caption, nodeurl, target) values (4,2,'功能管理','function.jsp','mainFrame');
 
     5insert into TreeInfo (nodeid, parentid, caption, nodeurl, target) values (5,2,'用户角色分配','user_role.jsp','mainFrame');
 
     6insert into TreeInfo (nodeid, parentid, caption, nodeurl, target) values (6,2,'角色功能分配','role_func.jsp','mainFrame');

3、写一个Action类:

 
     01public ActionForward tree(ActionMapping mapping, ActionForm form,
 
     02HttpServletRequest request, HttpServletResponse response)
 
     03throws Exception {    
 
     04 
 
     05TreeInfo treeInfo = new TreeInfo();
 
     06//这里只是取得TreeInfo表中所有数据，你可以根据自己的应用来取值
 
     07List<TreeInfo> treeList = treeInfoService.getTreeInfo();
 
     08/*****将取得的记录依次添加到StringBuffer中，然后返回str字符串************/
 
     09StringBuffer sb = new StringBuffer();
 
     10String str = null;
 
     11String parid = null;
 
     12sb.append("0,-1,''@");
 
     13for(Iterator iter = treeList.iterator();iter.hasNext();){
 
     14TreeInfo tree = (TreeInfo)iter.next();    
 
     15 
 
     16str = tree.getNodeid()+","+tree.getParentid()+",'"+tree.getCaption()+"',"+tree.getNodeurl()+",'"+tree.getTarget()+"'@";
 
     17sb.append(str);
 
     18}
 
     19request.setAttribute("str", sb.toString());
 
     20//注意:str是tree.jsp中的request.getAttribute("str");
 
     21System.out.println("打印树节点："+sb.toString());
 
     22/***********************************************************/   
 
     23 
 
     24return mapping.findForward("projectShow");
 
     25}

4、修改Tree.jsp页面
修改其中生成树的javascript代码：

 
     01<div class="dtree">
 
     02<script type="text/javascript">
 
     03<!--
 
     04d = new dTree('d');
 
     05<%
 
     06String str = (String)request.getAttribute("str");
 
     07String[] ar =  str.split("@");
 
     08for(int i=0;i<ar.length;i++){
 
     09%>
 
     10d.add(<%=ar[i]%>);
 
     11<%}%>
 
     12document.write(d);
 
     13//-->
 
     14</script>
 
     15</div>

5、重新运行应用程序，动态树显示出来。

dtree动态树+Javascript右键菜单（三）
以下是实现Javascript的右键菜单的功能。

解决：
1、对页面定义一个div，div中设置一个表格，表格中的各行即右键菜单的各个菜单项，比如“新增”、“删除”、“修改”等。
2、定义页面的右键弹出事件的javascript函数，在函数中设置body.innerHTML为该div的innerHTML，以此显示右键菜单。
3、对于页面的不同对象，设置不同的控制字符串，比如“101”，此字符串作为弹出事件javascript函数的参数，
在该函数中解析该字符串，动态控制div中表格不同行的显示与否。比如对于“101”，则显示“新增”和“修改”这两个菜单项。

下面是具体实现步骤：
1、在<body>中：<body οncοntextmenu=showMenu(”)>
2、添加<form>：

 
     01<form name = "menuForm">
 
     02     <!--隐藏框，用来保存选择的菜单的id值-->
 
     03     <input type = "hidden" name = "id" value = "">
 
     04    <table><tr><td>
 
     05    <div class="dtree">
 
     06<script type="text/javascript">
 
     07<!--
 
     08d = new dTree('d');
 
     09<%
 
     10String str = (String)request.getAttribute("str");
 
     11String[] ar =  str.split("@");
 
     12for(int i=0;i<ar.length;i++){
 
     13%>
 
     14d.add(<%=ar[i]%>);
 
     15<%}%>
 
     16document.write(d);
 
     17//-->
 
     18</script>
 
     19</div>
 
     20    </td></tr></table>
 
     21  </form>

3、首先修改Tree.jsp页面
在该页面的</body> 和 </html>之间添加如下html代码：

 
     01<!-- 右键开始 -->
 
     02<div id="itemMenu" style="display:none">
 
     03  <table border="1" width="100%" bgcolor="#D0D0D0" style="border:thin" cellspacing="0">
 
     04    <tr>
 
     05      <td style="cursor:hand;border:outset 1;font-size:12px" align="left" onclick="parent.addNode()">新增</td>
 
     06    </tr>    
 
     07 
 
     08    <tr>
 
     09      <td style="cursor:hand;border:outset 1;font-size:12px" align="left" onclick="parent.delNode()">删除</td>
 
     10    </tr>    
 
     11 
 
     12    <tr>
 
     13      <td style="cursor:hand;border:outset 1;font-size:12px" align="left" onclick="parent.updateNode()">更新</td>
 
     14    </tr>
 
     15  </table>
 
     16</div>
 
     17<!-- 右键结束 -->

到这里就定义了右键菜单中有三项：新增、删除、更新

4、定义页面的右键弹出事件的javascript函数

`01`	`<script language="JavaScript">`

02 /**

`03`	`*根据传入的id显示右键菜单`

04 */

`05`	`function` `showMenu(id)`

06 {

`07`	`menuForm.id.value = id;`

`08`	`if(""` `== id)`

09 {

`10`	`popMenu(itemMenu,100,"1000");`

11 }

12 else

13 {

`14`	`popMenu(itemMenu,100,"1111");`

15 }

`16`	`event.returnValue=false;`

`17`	`event.cancelBubble=true;`

`18`	`return` `false;`

19 }

20 /**

21 *显示弹出菜单

`22`	`*menuDiv:右键菜单的内容`

`23`	`*width:行显示的宽度`

`24`	`*rowControlString:行控制字符串，0表示不显示，1表示显示，如“101”，则表示第1、3行显示，第2行不显示`

25 */

`26`	`function` `popMenu(menuDiv,width,rowControlString)`

27 {

`28`	`//创建弹出菜单`

`29`	`var` `pop=window.createPopup();`

`30`	`//设置弹出菜单的内容`

`31`	`pop.document.body.innerHTML=menuDiv.innerHTML;`

`32`	`var` `rowObjs=pop.document.body.all[0].rows;`

`33`	`//获得弹出菜单的行数`

`34`	`var` `rowCount=rowObjs.length;`

`35`	`//循环设置每行的属性`

`36`	`for(var` `i=0;i<rowObjs.length;i++)`

37 {

`38`	`//如果设置该行不显示，则行数减一`

`39`	`var` `hide=rowControlString.charAt(i)!='1';`

`40`	`if(hide){`

`41`	`rowCount--;`

42 }

`43`	`//设置是否显示该行`

`44`	`rowObjs[i].style.display=(hide)?"none":"";`

`45`	`//设置鼠标滑入该行时的效果`

`46`	`rowObjs[i].cells[0].onmouseover=function()`

47 {

`48`	`this.style.background="#aec3de";`

`49`	`this.style.color="red";`

50 }

`51`	`//设置鼠标滑出该行时的效果`

`52`	`rowObjs[i].cells[0].onmouseout=function(){`

`53`	`this.style.background="#5cb4dd";`

`54`	`this.style.color="#000000";`

55 }

56 }

`57`	`//屏蔽菜单的菜单`

`58`	`pop.document.oncontextmenu=function()`

59 {

`60`	`return` `false;`

61 }

`62`	`//选择右键菜单的一项后，菜单隐藏`

`63`	`pop.document.onclick=function()`

64 {

`65`	`pop.hide();`

66 }

67 //显示菜单

`68`	`pop.show(event.clientX-1,event.clientY,width,rowCount*25,document.body);`

`69`	`return` `true;`

70 }

`71`	`function` `create()`

72 {

`73`	`alert("create"` `+ menuForm.id.value +` `"!");`

74 }

`75`	`function` `update()`

76 {

`77`	`alert("update"` `+ menuForm.id.value +` `"!");`

78 }

`79`	`function` `del()`

80 {

`81`	`alert("delete"` `+ menuForm.id.value +` `"!");`

82 }

`83`	`function` `select()`

84 {

`85`	`alert("select"` `+ menuForm.id.value +` `"!");`

86 }

`87`	`function` `clickMenu()`

88 {

`89`	`alert("you click a menu!");`

90 }

`91`	`</script>`

源码下载：http://u.115.com/file/f475a37e0d

摘自：http://woijava.tk/archives/dtree-javascript-java.html

相关参考：http://luohua.javaeye.com/blog/451453

dtree使用手册以及简单的例子：http://www.javaeye.com/topic/284239

dtree 官网： http://www.destroydrop.com/javascripts/tree/api/

转载于:https://www.cnblogs.com/lushuicongsheng/archive/2010/11/09/1872506.html

weixin_30378623

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫