DHTML Tree 使用实例

最新推荐文章于 2021-06-09 10:48:59 发布

最新推荐文章于 2021-06-09 10:48:59 发布 · 160 阅读

文章标签：

#JSP #ASP

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个基于Java的动态菜单实现方案，包括jsp页面显示菜单、Action处理菜单数据、使用dom4j格式化数据等关键步骤，并提供了checkbox使用的额外功能。

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() //取得所有选中的，包括父，父的父