網(wǎng)上大部分菜單樹(shù),都是單獨(dú)用js代碼來(lái)實(shí)現(xiàn)的,這樣做的缺點(diǎn)是:用戶無(wú)法動(dòng)態(tài)的設(shè)置菜單項(xiàng),比如,超級(jí)管理員可能需要根據(jù)每個(gè)用戶的權(quán)限,賦予他們不同的系統(tǒng)功能,不同的功能對(duì)應(yīng)著不同數(shù)量的菜單項(xiàng)。
對(duì)于此問(wèn)題,本人在他人一個(gè)js菜單的基礎(chǔ)上,開(kāi)發(fā)了一個(gè)動(dòng)態(tài)的系統(tǒng)菜單結(jié)構(gòu)樹(shù):利用java代碼創(chuàng)建樹(shù)對(duì)象,并可以無(wú)限級(jí)別地給他添加子節(jié)點(diǎn),然后在頁(yè)面上生成js代碼來(lái)顯示樹(shù)菜單。
在這兒寫(xiě)一個(gè)簡(jiǎn)單的Demo ,此例子共包含個(gè)文件,如下:
1、Node.java 節(jié)點(diǎn)類。
2、TreeBoot.java 樹(shù)的根類。
3、treeBean.java 頁(yè)面中引入的javaBean,在此文件中實(shí)現(xiàn)菜單樹(shù)的構(gòu)建。
3、test.jsp 測(cè)試頁(yè)面。
下面提供各個(gè)文件的代碼:
Node.java
TreeBoot.java
treeBean.java
test.jsp
運(yùn)行結(jié)果:
對(duì)于此問(wèn)題,本人在他人一個(gè)js菜單的基礎(chǔ)上,開(kāi)發(fā)了一個(gè)動(dòng)態(tài)的系統(tǒng)菜單結(jié)構(gòu)樹(shù):利用java代碼創(chuàng)建樹(shù)對(duì)象,并可以無(wú)限級(jí)別地給他添加子節(jié)點(diǎn),然后在頁(yè)面上生成js代碼來(lái)顯示樹(shù)菜單。
在這兒寫(xiě)一個(gè)簡(jiǎn)單的Demo ,此例子共包含個(gè)文件,如下:
1、Node.java 節(jié)點(diǎn)類。
2、TreeBoot.java 樹(shù)的根類。
3、treeBean.java 頁(yè)面中引入的javaBean,在此文件中實(shí)現(xiàn)菜單樹(shù)的構(gòu)建。
3、test.jsp 測(cè)試頁(yè)面。
下面提供各個(gè)文件的代碼:
Node.java
package com.syw.tree;
import java.util.ArrayList;
import java.util.List;
public class Node{
//此節(jié)點(diǎn)下的子節(jié)點(diǎn)list,可以無(wú)限制 地向下擴(kuò)展子節(jié)點(diǎn)
private List<Node> list;
//節(jié)點(diǎn)連接地址
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;
//節(jié)點(diǎn)圖標(biāo),如果不給其賦值,有默認(rèn)圖標(biāo)
private String img;
//用于標(biāo)識(shí)是checkBox(input = 1), 還是 link(input = 0)
private int input = 0;
//link構(gòu)造方法
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構(gòu)造方法
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;
}
//為樹(shù)添加節(jié)點(diǎn)
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;
}
}
import java.util.ArrayList;
import java.util.List;
public class Node{
//此節(jié)點(diǎn)下的子節(jié)點(diǎn)list,可以無(wú)限制 地向下擴(kuò)展子節(jié)點(diǎn)
private List<Node> list;
//節(jié)點(diǎn)連接地址
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;
//節(jié)點(diǎn)圖標(biāo),如果不給其賦值,有默認(rèn)圖標(biāo)
private String img;
//用于標(biāo)識(shí)是checkBox(input = 1), 還是 link(input = 0)
private int input = 0;
//link構(gòu)造方法
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構(gòu)造方法
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;
}
//為樹(shù)添加節(jié)點(diǎn)
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 {
//樹(shù)的標(biāo)題
private String title;
//樹(shù)根節(jié)點(diǎn)的圖標(biāo)
private String titleImgPath;
//合并成的js語(yǔ)句內(nèi)容
private String treeContent;
//樹(shù)的所有子節(jié)點(diǎn)
private List<Node> list;
//節(jié)點(diǎn)計(jì)數(shù)器
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;
}
//用遞歸函數(shù)取得所有樹(shù)節(jié)點(diǎn),并組合成js語(yǔ)句
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);
}
}
}
//創(chuàng)建樹(shù),并返回js代碼
public String buildTree() {
this.treeContent = "d.add(0,-1,'"+title+"');";
readList(list,0);
return this.treeContent;
}
}
import java.util.ArrayList;
import java.util.List;
public class TreeRoot {
//樹(shù)的標(biāo)題
private String title;
//樹(shù)根節(jié)點(diǎn)的圖標(biāo)
private String titleImgPath;
//合并成的js語(yǔ)句內(nèi)容
private String treeContent;
//樹(shù)的所有子節(jié)點(diǎn)
private List<Node> list;
//節(jié)點(diǎn)計(jì)數(shù)器
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;
}
//用遞歸函數(shù)取得所有樹(shù)節(jié)點(diǎn),并組合成js語(yǔ)句
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);
}
}
}
//創(chuàng)建樹(shù),并返回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測(cè)試","","");
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測(cè)試","","");
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();
}
}
import java.util.ArrayList;
import java.util.List;
public class treeBean {
/**
* @param args
*/
public static String tree() {
Node log = new Node("","我的A Link測(cè)試","","");
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測(cè)試","","");
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;
//執(zhí)行代碼
eval(treecontent);
document.write(d);
//-->
</script>
</div>
</body>
</html>
<%@ 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;
//執(zhí)行代碼
eval(treecontent);
document.write(d);
//-->
</script>
</div>
</body>
</html>
運(yùn)行結(jié)果:
