网上大部分菜单树,都是单独用js代码来实现的,这样做的缺点是:用户无法动态的设置菜单项,比如,超级管理员可能需要根据每个用户的权限,赋予他们不同的系统功能,不同的功能对应着不同数量的菜单项。
对于此问题,本人在他人一个js菜单的基础上,开发了一个动态的系统菜单结构树:利用java代码创建树对象,并可以无限级别地给他添加子节点,然后在页面上生成js代码来显示树菜单。
在这儿写一个简单的Demo ,此例子共包含个文件,如下:
1、Node.java 节点类。
2、TreeBoot.java 树的根类。
3、treeBean.java 页面中引入的javaBean,在此文件中实现菜单树的构建。
3、test.jsp 测试页面。
下面提供各个文件的代码:
Node.java
package com.syw.tree; import java.util.ArrayList; import java.util.List; public class Node{ //此节点下的子节点list,可以无限制 地向下扩展子节点 private List<Node> list; //节点连接地址 private String url; //要显示的文字 private String showName; //指定要显示的Iframe private String target; //name属性 private String name; //如果为checkBox,selected = true or false private boolean isSelected; //如果为checkBox,value属性值 private String value; //节点图标,如果不给其赋值,有默认图标 private String img; //用于标识是checkBox(input = 1), 还是 link(input = 0) private int input = 0; //link构造方法 public Node(String url,String showName,String target,String img){ list = new ArrayList(); this.url = url; this.showName = showName; this.target = target; this.input = 0; this.img = img; } //checkBox构造方法 public Node(String showName,String name,boolean isSelected,String value,String img){ list = new ArrayList(); this.showName = showName; this.name = name; this.isSelected = isSelected; this.value = value; this.input = 1; this.img = img; } //为树添加节点 public void add(Node node){ this.list.add(node); } //以下为所有属性的set、get方法 public List getList() { return list; } public void setList(List list) { this.list = list; } public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } public String getTarget() { return target; } public void setTarget(String target) { this.target = target; } public String getShowName() { return showName; } public void setShowName(String showName) { this.showName = showName; } public String getName() { return name; } public void setName(String name) { this.name = name; } public boolean isSelected() { return isSelected; } public void setSelected(boolean isSelected) { this.isSelected = isSelected; } public String getValue() { return value; } public void setValue(String value) { this.value = value; } public int getInput() { return input; } public void setInput(int input) { this.input = input; } public String getImg() { return img; } public void setImg(String img) { this.img = img; } }
treeBoot.java
package com.syw.tree; import java.util.ArrayList; import java.util.List; public class TreeRoot { //树的标题 private String title; //树根节点的图标 private String titleImgPath; //合并成的js语句内容 private String treeContent; //树的所有子节点 private List<Node> list; //节点计数器 private int nodeId = 0; public TreeRoot(String title){ list = new ArrayList(); this.title = title; } public void add(Node node){ this.list.add(node); } public void setTitle(String title) { this.title = title; } public void setTitleImgPath(String titleImgPath) { this.titleImgPath = titleImgPath; } public void setList(List<Node> list) { this.list = list; } //用递归函数取得所有树节点,并组合成js语句 private void readList(List<Node> list,int parentId){ for(Node node:list){ this.nodeId++; if(node.getInput() == 0){ this.treeContent += "d.add("+this.nodeId+","+parentId+",'"+node.getShowName()+"','"+node.getUrl()+"','','"+node.getTarget()+"','');"; }else{ this.treeContent += "d.add("+this.nodeId+","+parentId+",'"+node.getShowName()+"<input name=""+node.getName()+"" type="checkbox" "+(node.isSelected()?"checked="checked" ":"")+"" value=""+node.getValue()+"" >','','','','');"; } if(node.getList().size()>0){ readList(node.getList(),this.nodeId); } } } //创建树,并返回js代码 public String buildTree() { this.treeContent = "d.add(0,-1,'"+title+"');"; readList(list,0); return this.treeContent; } }
treeBean.java
package com.syw.tree; import java.util.ArrayList; import java.util.List; public class treeBean { /** * @param args */ public static String tree() { Node log = new Node("","我的A Link测试","",""); log.add(new Node("http://www.baidu.com","删除日志","iframe","")); log.add(new Node("http://www.baidu.com","添加日志","iframe","")); log.add(new Node("http://www.baidu.com","修改日志","iframe","")); Node checkbox = new Node("","我的checkBox测试","",""); checkbox.add(new Node("信息1","ss",false,"value1","")); checkbox.add(new Node("信息3","ss",false,"value3","")); checkbox.add(new Node("信息2","ss",false,"value2","")); checkbox.add(new Node("信息4","ss",false,"value4","")); TreeRoot blogTree = new TreeRoot("blog管理"); blogTree.add(log); blogTree.add(checkbox); return blogTree.buildTree(); } }
test.jsp
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <%@ page import="com.syw.tree.treeBean"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="StyleSheet" href="dtree.css" type="text/css" /> <script type="text/javascript" src="dtree.js"></script> </head> <body> <div style="display:none" id="tree"><%=treeBean.tree()%></div> <script type="text/javascript"> <!-- d = new dTree('d'); //从treeBean中获取js代码 var treecontent = document.getElementById("tree").innerHTML; //执行代码 eval(treecontent); document.write(d); //--> </script> </div> </body> </html>
运行结果:
(收藏)