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

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
<!--

13
d = new dTree('d'); 

14
 
15
d.add(0,-1,'后台管理'); 

16
 
17
d.add(1,0,'welcom','wel','权限管理'); 

18
 
19
d.add(2,1,'welcom','wel','<a href=javascript:clickMenu(); oncontextmenu=showMenu("a8a0d9175219a593801219a5efbff0002")>用户管理</a>'); 

20
 
21
d.add(3,2,'welcom','wel','<a href=javascript:clickMenu(); oncontextmenu=showMenu("8a0d9156219a71a201219a73422e0001")>角色管理</a>'); 

22
 
23
d.add(4,2,'welcom','wel','<a href=javascript:clickMenu(); oncontextmenu=showMenu("8a0d9156219a5a9901219a61df120003")>功能管理</a>'); 

24
 
25
d.add(5,2,'welcom','wel','<a href=javascript:clickMenu(); oncontextmenu=showMenu("8a0d9156219a5a9901219a5d62f00002")>用户角色分配</a>'); 

26
 
27
d.add(6,2,'welcom','wel','<a href=javascript:clickMenu(); oncontextmenu=showMenu("8a0d9156219a5a9901219a5ce5730001")>角色功能分配</a>'); 

28
 
29
document.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中包含如下字段：

01
CREATE 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、在数据库中创建这样的表
写入几条数据：

1
insert into TreeInfo (nodeid, parentid, caption, nodeurl, target) values (1,0,'权限管理','jsp1.jsp','mainFrame');

2
insert into TreeInfo (nodeid, parentid, caption, nodeurl, target) values (2,1,'用户管理','user.jsp','mainFrame');

3
insert into TreeInfo (nodeid, parentid, caption, nodeurl, target) values (3,2,'角色管理','role.jsp','mainFrame');

4
insert into TreeInfo (nodeid, parentid, caption, nodeurl, target) values (4,2,'功能管理','function.jsp','mainFrame');

5
insert into TreeInfo (nodeid, parentid, caption, nodeurl, target) values (5,2,'用户角色分配','user_role.jsp','mainFrame');

6
insert into TreeInfo (nodeid, parentid, caption, nodeurl, target) values (6,2,'角色功能分配','role_func.jsp','mainFrame');

3、写一个Action类:

01
public ActionForward tree(ActionMapping mapping, ActionForm form,

02
HttpServletRequest request, HttpServletResponse response)

03
throws Exception {    

04
 
05
TreeInfo treeInfo = new TreeInfo();

06
//这里只是取得TreeInfo表中所有数据，你可以根据自己的应用来取值

07
List<TreeInfo> treeList = treeInfoService.getTreeInfo();

08
/*****将取得的记录依次添加到StringBuffer中，然后返回str字符串************/

09
StringBuffer sb = new StringBuffer();

10
String str = null;

11
String parid = null;

12
sb.append("0,-1,''@");

13
for(Iterator iter = treeList.iterator();iter.hasNext();){

14
TreeInfo tree = (TreeInfo)iter.next();    

15
 
16
str = tree.getNodeid()+","+tree.getParentid()+",'"+tree.getCaption()+"',"+tree.getNodeurl()+",'"+tree.getTarget()+"'@";

17
sb.append(str);

18
}

19
request.setAttribute("str", sb.toString());

20
//注意:str是tree.jsp中的request.getAttribute("str");

21
System.out.println("打印树节点："+sb.toString());

22
/***********************************************************/   

23
 
24
return mapping.findForward("projectShow");

25
}

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

01
<div class="dtree">

02
<script type="text/javascript">

03
<!--

04
d = new dTree('d');

05
<%

06
String str = (String)request.getAttribute("str");

07
String[] ar =  str.split("@");

08
for(int i=0;i<ar.length;i++){

09
%>

10
d.add(<%=ar[i]%>);

11
<%}%>

12
document.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 oncontextmenu=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
<!--

08
d = new dTree('d');

09
<%

10
String str = (String)request.getAttribute("str");

11
String[] ar =  str.split("@");

12
for(int i=0;i<ar.length;i++){

13
%>

14
d.add(<%=ar[i]%>);

15
<%}%>

16
document.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 *行显示的宽度

`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/