DHTML Tree 使用实例
徐洋
Java 动态菜单实例
一．jsp页面显示菜单(最简单的树型菜单)
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="../includes/includeTags.jspf"%>
<HTML><HTML>
<HEAD>
<TITLE>PAS菜单</TITLE>
<LINK href="../resources/css/site.css" rel="stylesheet" type="text/css" />
<link rel="STYLESHEET" type="text/css" href="../resources/css/dhtmlXTree.css">
<script src="../resources/js/dhtml/dhtmlXCommon.js"></script>
<script src="../resources/js/dhtml/dhtmlXTree.js"></script>
<script src="../resources/js/dhtml/dhtmlXTree_start.js"></script>
<%
String id = request.getParameter("id");
request.setAttribute("id", id);
%>
</HEAD>
<BODY>
<div id="menuTree"></div>
<script>
tree=new dhtmlXTreeObject(document.getElementById('menuTree'),"100%","100%",0);
tree.setImagePath("../images/imgs/csh_winstyle/");//设置菜单图片风格路径。
//link tree to asp script
tree.setXMLAutoLoading("../menuTree.do?method=showMenu");
//load first level of tree
tree.loadXML("../menuTree.do?method=showMenu&type=root&id=<c:out value='${id}'/>");
//设置点击事件，打开对应连接页面。
tree.setOnClickHandler(doOnClick);
//tree.setOnOpenHandler(tonopen);
//设置菜单图片类型，目前有3中风格可选，也可自定义风格。
//tree.setImageArrays("plus","","","","plus_ar.gif");
//tree.setImageArrays("minus","","","","minus_ar.gif");
//tree.setStdImages("book.gif","books_open.gif","books_close.gif");
function doOnClick(nodeId){
var myUrl = tree.getUserData(nodeId,"file")
if(null != myUrl && myUrl !='#'){
parent.mainMenu.location=myUrl;
}
}
</script>
</BODY>
</HTML>
二．Action取得菜单数据，并处理菜单格式。
使用dom4j格式化数据。
public class ShowMenuAction extends PasBaseAction{
@Override
protected Class setClass() {
return this.getClass();
}
//dom4j 对象
private Document document = null;
private Element rootElement = null;
private Element prevElement = null;
public ActionForward showMenu(
ActionMapping mapping,
ActionForm form,
HttpServletRequest request,
HttpServletResponse response)throws Exception {
// a) 获取参数grpId
String xmdh = request.getParameter("id");//上级菜单编号
String type = request.getParameter("type");//根菜单类型。
//取用户
LoginUser user = getLoginUser(request);
MenuService menuSrv = (MenuService)SpringAppContext.getBean(MenuService.KEY);
//根菜单
if (null != type && type.equals("root")) {
document = DocumentHelper.createDocument();
rootElement = document.addElement("tree");
rootElement.addAttribute("id", "0");
XtbXtcd key = new XtbXtcd();//菜单对象。（下附菜单对象类）
key.setXmdh(Integer.parseInt(xmdh));
XtbXtcd rootCd = menuSrv.selectByPrimaryKey(key);//根菜单对象
addElement(rootElement,rootCd);
} else {
document = DocumentHelper.createDocument();
rootElement = document.addElement("item");
rootElement.addAttribute("id", xmdh);
//下级菜单数据集合（附带用户权限）
List menu = menuSrv.LoadUserMenuChildrens(user.getKhdxdh().toString(),xmdh);
for (Iterator it=menu.iterator() ; it.hasNext(); ){
XtbXtcd firstCd = (XtbXtcd)it.next();
//找到父菜单的element
String pareId = firstCd.getSjxm()+"";
prevElement = null;
Iterator itr = rootElement.elementIterator();
getElement(itr, pareId);
addElement(rootElement,firstCd);
}
}
//输出格式化后的数据
Writer writer = response.getWriter();
response.setContentType("text/xml; charset=GB2312");
document.write(writer);
writer.close();
return null;
}
/**
* 找到父id
* @param nodelist
* @param id
*/
private void getElement(Iterator nodelist, String id) {
if (nodelist.hasNext() == false)
return;
while (nodelist.hasNext()) {
if (prevElement != null)
break;
Element cnode = (Element) nodelist.next();
if (cnode.getNodeType() == Document.ELEMENT_NODE) {
if (id.equals(((Element) cnode).attributeValue("id"))) {
prevElement = (Element) cnode;
} else
getElement(cnode.elementIterator(), id);
}
}
return;
}
/**
* 添加item
* @param element
* @param menu
*/
void addElement(Element element,XtbXtcd menu){
Element newElement = element.addElement("item");
newElement.addAttribute("text", menu.getXmmc());
newElement.addAttribute("id", menu.getXmdh()+"");
if(!menu.isURL()){
newElement.addAttribute("child", "1");
}
addUrl(newElement,menu);
}
/**
* 添加连接
* @param element
* @param childCd
*/
void addUrl(Element element,XtbXtcd childCd){
if(childCd.isURL()){
Element urlElement=element.addElement("userdata");
urlElement.addAttribute("name", "file");
urlElement.setText(childCd.getXmdz());
}
}
public Document getDocument() {
return document;
}
public void setDocument(Document document) {
this.document = document;
}
public Element getPrevElement() {
return prevElement;
}
public void setPrevElement(Element prevElement) {
this.prevElement = prevElement;
}
public Element getRootElement() {
return rootElement;
}
public void setRootElement(Element rootElement) {
this.rootElement = rootElement;
}
}
三、菜单对象类
public class XtbXtcd {
//菜单级别分类
public final static int NODE_UNKNOW = 0;
public final static int NODE_CATALOG = 1;
public final static int NODE_URL = 2;
public final static int NODE_FUNCTION = 4;
public final static int NODE_MENU = 8;
public final static int NODE_SYSTEM = 16;
private Integer xmdh; //菜单编号 主键
private String xmmc; //菜单名称
private String xmdz; //菜单地址
private Integer sjxm; //上级菜单编号
private String cdjb; //菜单级别
//user only this to instead type of string
public boolean isMenuItem() {
return (Integer.parseInt(cdjb) & NODE_MENU) == NODE_MENU;
}
public boolean isURL() {
return (Integer.parseInt(cdjb) & NODE_URL) == NODE_URL;
}
public boolean isCatalog() {
return (Integer.parseInt(cdjb) & NODE_CATALOG) == NODE_CATALOG;
}
public boolean isFunction() {
return (Integer.parseInt(cdjb) & NODE_FUNCTION) == NODE_FUNCTION;
}
public boolean isSystem() {
return (Integer.parseInt(cdjb) & NODE_SYSTEM) == NODE_SYSTEM;
}
public Integer getXmdh() {
return xmdh;
}
。。。。下略
}
四、其他实用功能粗解
1. checkbox使用
1.1 Jsp页面设置
tree.enableCheckBoxes(1);
tree.enableThreeStateCheckboxes(true);//级联选中下级节点
//check item
tree.setCheck(id,true);
//uncheck item
tree.setCheck(id,false);
//check branch
tree.setSubChecked(id,true);
//uncheck branch
tree.setSubChecked(id,false);
//check item
tree.setCheck(id,true);
//return ids of checked items
var list=tree.getAllChecked();//取得所有选中的，不包括父
var list=tree.getAllCheckedBranches() //取得所有选中的父。父的父。。。。
var list= tree.getAllPartiallyChecked() //取得所有选中的，包括父，父的父
一．jsp页面显示菜单(最简单的树型菜单)
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="../includes/includeTags.jspf"%>
<HTML><HTML>
<HEAD>
<TITLE>PAS菜单</TITLE>
<LINK href="../resources/css/site.css" rel="stylesheet" type="text/css" />
<link rel="STYLESHEET" type="text/css" href="../resources/css/dhtmlXTree.css">
<script src="../resources/js/dhtml/dhtmlXCommon.js"></script>
<script src="../resources/js/dhtml/dhtmlXTree.js"></script>
<script src="../resources/js/dhtml/dhtmlXTree_start.js"></script>
<%
String id = request.getParameter("id");
request.setAttribute("id", id);
%>
</HEAD>
<BODY>
<div id="menuTree"></div>
<script>
tree=new dhtmlXTreeObject(document.getElementById('menuTree'),"100%","100%",0);
tree.setImagePath("../images/imgs/csh_winstyle/");//设置菜单图片风格路径。
//link tree to asp script
tree.setXMLAutoLoading("../menuTree.do?method=showMenu");
//load first level of tree
tree.loadXML("../menuTree.do?method=showMenu&type=root&id=<c:out value='${id}'/>");
//设置点击事件，打开对应连接页面。
tree.setOnClickHandler(doOnClick);
//tree.setOnOpenHandler(tonopen);
//设置菜单图片类型，目前有3中风格可选，也可自定义风格。
//tree.setImageArrays("plus","","","","plus_ar.gif");
//tree.setImageArrays("minus","","","","minus_ar.gif");
//tree.setStdImages("book.gif","books_open.gif","books_close.gif");
function doOnClick(nodeId){
var myUrl = tree.getUserData(nodeId,"file")
if(null != myUrl && myUrl !='#'){
parent.mainMenu.location=myUrl;
}
}
</script>
</BODY>
</HTML>
二．Action取得菜单数据，并处理菜单格式。
使用dom4j格式化数据。
public class ShowMenuAction extends PasBaseAction{
@Override
protected Class setClass() {
return this.getClass();
}
//dom4j 对象
private Document document = null;
private Element rootElement = null;
private Element prevElement = null;
public ActionForward showMenu(
ActionMapping mapping,
ActionForm form,
HttpServletRequest request,
HttpServletResponse response)throws Exception {
// a) 获取参数grpId
String xmdh = request.getParameter("id");//上级菜单编号
String type = request.getParameter("type");//根菜单类型。
//取用户
LoginUser user = getLoginUser(request);
MenuService menuSrv = (MenuService)SpringAppContext.getBean(MenuService.KEY);
//根菜单
if (null != type && type.equals("root")) {
document = DocumentHelper.createDocument();
rootElement = document.addElement("tree");
rootElement.addAttribute("id", "0");
XtbXtcd key = new XtbXtcd();//菜单对象。（下附菜单对象类）
key.setXmdh(Integer.parseInt(xmdh));
XtbXtcd rootCd = menuSrv.selectByPrimaryKey(key);//根菜单对象
addElement(rootElement,rootCd);
} else {
document = DocumentHelper.createDocument();
rootElement = document.addElement("item");
rootElement.addAttribute("id", xmdh);
//下级菜单数据集合（附带用户权限）
List menu = menuSrv.LoadUserMenuChildrens(user.getKhdxdh().toString(),xmdh);
for (Iterator it=menu.iterator() ; it.hasNext(); ){
XtbXtcd firstCd = (XtbXtcd)it.next();
//找到父菜单的element
String pareId = firstCd.getSjxm()+"";
prevElement = null;
Iterator itr = rootElement.elementIterator();
getElement(itr, pareId);
addElement(rootElement,firstCd);
}
}
//输出格式化后的数据
Writer writer = response.getWriter();
response.setContentType("text/xml; charset=GB2312");
document.write(writer);
writer.close();
return null;
}
/**
* 找到父id
* @param nodelist
* @param id
*/
private void getElement(Iterator nodelist, String id) {
if (nodelist.hasNext() == false)
return;
while (nodelist.hasNext()) {
if (prevElement != null)
break;
Element cnode = (Element) nodelist.next();
if (cnode.getNodeType() == Document.ELEMENT_NODE) {
if (id.equals(((Element) cnode).attributeValue("id"))) {
prevElement = (Element) cnode;
} else
getElement(cnode.elementIterator(), id);
}
}
return;
}
/**
* 添加item
* @param element
* @param menu
*/
void addElement(Element element,XtbXtcd menu){
Element newElement = element.addElement("item");
newElement.addAttribute("text", menu.getXmmc());
newElement.addAttribute("id", menu.getXmdh()+"");
if(!menu.isURL()){
newElement.addAttribute("child", "1");
}
addUrl(newElement,menu);
}
/**
* 添加连接
* @param element
* @param childCd
*/
void addUrl(Element element,XtbXtcd childCd){
if(childCd.isURL()){
Element urlElement=element.addElement("userdata");
urlElement.addAttribute("name", "file");
urlElement.setText(childCd.getXmdz());
}
}
public Document getDocument() {
return document;
}
public void setDocument(Document document) {
this.document = document;
}
public Element getPrevElement() {
return prevElement;
}
public void setPrevElement(Element prevElement) {
this.prevElement = prevElement;
}
public Element getRootElement() {
return rootElement;
}
public void setRootElement(Element rootElement) {
this.rootElement = rootElement;
}
}
三、菜单对象类
public class XtbXtcd {
//菜单级别分类
public final static int NODE_UNKNOW = 0;
public final static int NODE_CATALOG = 1;
public final static int NODE_URL = 2;
public final static int NODE_FUNCTION = 4;
public final static int NODE_MENU = 8;
public final static int NODE_SYSTEM = 16;
private Integer xmdh; //菜单编号 主键
private String xmmc; //菜单名称
private String xmdz; //菜单地址
private Integer sjxm; //上级菜单编号
private String cdjb; //菜单级别
//user only this to instead type of string
public boolean isMenuItem() {
return (Integer.parseInt(cdjb) & NODE_MENU) == NODE_MENU;
}
public boolean isURL() {
return (Integer.parseInt(cdjb) & NODE_URL) == NODE_URL;
}
public boolean isCatalog() {
return (Integer.parseInt(cdjb) & NODE_CATALOG) == NODE_CATALOG;
}
public boolean isFunction() {
return (Integer.parseInt(cdjb) & NODE_FUNCTION) == NODE_FUNCTION;
}
public boolean isSystem() {
return (Integer.parseInt(cdjb) & NODE_SYSTEM) == NODE_SYSTEM;
}
public Integer getXmdh() {
return xmdh;
}
。。。。下略
}
四、其他实用功能粗解
1. checkbox使用
1.1 Jsp页面设置
tree.enableCheckBoxes(1);
tree.enableThreeStateCheckboxes(true);//级联选中下级节点
//check item
tree.setCheck(id,true);
//uncheck item
tree.setCheck(id,false);
//check branch
tree.setSubChecked(id,true);
//uncheck branch
tree.setSubChecked(id,false);
//check item
tree.setCheck(id,true);
//return ids of checked items
var list=tree.getAllChecked();//取得所有选中的，不包括父
var list=tree.getAllCheckedBranches() //取得所有选中的父。父的父。。。。
var list= tree.getAllPartiallyChecked() //取得所有选中的，包括父，父的父
类似资料：