網上大部分菜單樹,都是單獨用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>
運行結果: