ssh框架下用ajax动态从数据库查询菜单.docx

ssh框架下用ajax动态从数据库查询菜单.docx

《ssh框架下用ajax动态从数据库查询菜单.docx》由会员分享，可在线阅读，更多相关《ssh框架下用ajax动态从数据库查询菜单.docx（12页珍藏版）》请在冰豆网上搜索。

ssh框架下用ajax动态从数据库查询菜单

动态菜单的构建，即使用ajax异步与服务器通信，实时以局部刷新的方式从数据库取出菜单。

这里把我的实现记录下来，以备以后维护升级。

1、首先是model层

publicclassTreeMenu{

privateLongid。

privateLongparentID。

privateStringmenuName。

privateStringurl；

setter，getter省略

2、Dao层

数据库映射

b5E2RGbCAP

p1EanqFDPw

DXDiTa9E3d

RTCrpUDGiT

数据库的操作主要用到通过角色来取出菜单，判断是否有子菜单的操作

按角色取出所有菜单

publicListgetTreeMenuByRoleID（longroleID>{5PCzVD7HxA

returngetHibernateTemplate（>.find（"selectbfromRoleajoina.treeMenubwherea.id=?

",newObject[]{roleID}>。

jLBHrnAILg

}

按角色取出根菜单

publicListgetFirstLeaveMenuByRoleID（longroleID>{xHAQX74J0X

returngetHibernateTemplate（>.find（"selectbfromRoleajoina.treeMenubwherea.id=?

andb.parentID=0",newObject[]{roleID}>。

LDAYtRyKfE

}

判断是否有子菜单

publicbooleanhasChild（longid>{

return!

getHibernateTemplate（>.find（"fromTreeMenuawherea.parentID=?

",newObject[]{id}>.isEmpty（>。

Zzz6ZB2Ltk

}

数据库中存的结构如下所示：

3、思路及关键实现

下面将要讲到关键的地方，首先就得把思路说一下，思路是先显示parentID为0的菜单，也就是每个菜单的根部。

当点击根菜单的时候，再将下面的子菜单通过异步的方式取出。

效果如下：

dvzfvkwMI1

这里的话，我就自顶向下的方式说明。

首先是前台的jsp,主要代码如下：

iteratorvalue="treeMenu"id="parentMenu">

propertyvalue="#parentMenu.id"/>"class="a">rqyn14ZNXI

propertyvalue="#parentMenu.menuName"/>

propertyvalue="#parentMenu.id"/>"src="<%=request.getContextPath（>%>/images/downDetail.jpg"onclick="display（'

propertyvalue="#session.username"/>','

propertyvalue="#parentMenu.id"/>'>。

"align="top"height="10px"/>EmxvxOtOco

iterator>

表格的第一列存的是菜单，第二列存的是箭头。

菜单是通过一个List迭代出来的。

这里的关键是用到一个js。

js代码如下：

SixE2yXPq5

varxmlHttp。

varcreateMenuHistory=newArray（>。

varuserIDAllScope。

functioncreateXmlHttp（>{

if（window.ActiveXObject>{

xmlHttp=newActiveXObject（"Microsoft.XMLHTTP">。

}

elseif（window.XMLHttpRequest>{

xmlHttp=newXMLHttpRequest（>。

}

returnxmlHttp。

}

functiondisplay（userID,parentID>{

userIDAllScope=userID。

//alert（userID+parentID>。

varflag=true。

//alert（createMenuHistory.length>。

for（vari=0。

i

i++>{

//alert（"isnotfrist">。

//alert（createMenuHistory[i]>。

if（createMenuHistory[i]==parentID>{

flag=false。

break。

}

}

if（flag==true>{

//alert（"isnotexists"+""+flag>。

if（createMenuHistory.length==0>{

//alert（"isfrist">。

createMenuHistory[0]=parentID。

}else{

createMenuHistory[createMenuHistory.length]=parentID。

6ewMyirQFL

}

varqueryString="userID="+userID+"&parentID="+parentID。

kavU42VRUs

xmlHttp=createXmlHttp（>。

//alert（xmlHttp>。

xmlHttp.open（"POST","jsonSubMenu",true>。

xmlHttp.setRequestHeader（"Content-Type","application/x-www-form-urlencoded">。

y6v3ALoS89

xmlHttp.onreadystatechange=getSubMenuComplete。

//alert（"itisworked">。

xmlHttp.send（queryString>。

}else{

//alert（"isexists"+""+flag>。

vartarget=document.getElementById（"parent"+parentID>。

M2ub6vSTnP

varshowHide=target.className。

if（showHide=="show"||showHide=="hide">{

target.className="a"。

showHide="a"。

}

//alert（target.getAttribute（"id">+""+showHide>。

//alert（child.length>。

if（showHide=="b">{

target.className="a"。

varchild=target.childNodes

for（vari=1。

i

i++>{

child[i].className="show"。

}

}

elseif（showHide=="a">{

target.className="b"。

varchild=target.childNodes

for（vari=1。

i

i++>{

if（child[i].tagName!

="SPAN">

child[i].className="hide"。

}

}

}

}

functiongetSubMenuComplete（>{

if（xmlHttp.readyState==4&&xmlHttp.status==200>{

eval（'json='+xmlHttp.responseText+'。

'>。

//alert（xmlHttp.responseText>。

for（vari=0。

i

i++>{

vartarget=document.getElementById（"parent"+json.menus[i].parentID>。

0YujCfmUCw

varulElmt=document.createElement（"UL">。

varid="parent"+json.menus[i].id。

ulElmt.setAttribute（"id",id>。

ulElmt.setAttribute（"class","a">。

ulElmt.innerHTML=json.menus[i].appendToHtml。

target.appendChild（ulElmt>。

}

}

}

这里，我们需要一个数组来记录哪些父菜单被展开了，展开一个菜单，把菜单ID放入数组中，这里是createMenuHistory。

另外用到一个Class，a和b来表示展开或隐藏的情况。

eUts8ZQVRd

如果要展开菜单，则发送异步请求到jsonSubMenu这个Action。

通过这个Action，将得到一个json数据，格式如下：

sQsAEJkW5T

{menus:

[{id:

'12',parentID:

'11',name:

'采购订单查询',

hasChild:

'false',appendToHtml:

'

menu=cgddcx&viewAuth1=4&viewAuth2=0&viewAuth3=0&operationCode=0&pageNo=1&pagesFlag=0">采购订单查询GMsIasNXkA

'},{id:

'14',parentID:

'11',name:

'供应商发货清单

',hasChild:

'false',appendToHtml:

'

menu=fhqd&viewAuth1=6&viewAuth2=0&viewAuth3=0&operationCode=0&pageNo=1&pagesFlag=1">供应商发货清单'}]}TIrRGchYzg

在该数据中包含了id，父菜单id，菜单名，是否有子菜单，本身的地址信息。

然后把这些信息逐个包装成UL，加入到对应的父菜单的UL中。

7EqZcWLZNX

下面我们看一下jsonSubMenu是如何得到这个json数据的：

publicvoidgetSubTree（>throwsIllegalArgumentException,NoSuchFieldException,NoSuchMethodException,IllegalAccessException,InvocationTargetException{lzq7IGf02E

try{

ListtreeMenuBeans=roleManagerService.getSubTreeMenu（userID,parentID>。

zvpgeqJ1hk

IteratortreeMenuBeanIt=treeMenuBeans.iterator（>。

NrpoJac3v1

while（treeMenuBeanIt.hasNext（>>{

TreeMenuBeantreeMenuBean=（TreeMenuBean>treeMenuBeanIt.next（>。

1nowfTG4KI

listToJson（"menus",treeMenuBean>。

}

listToJsonEnd（>。

HttpServletResponseresponse=ServletActionContext.getResponse（>。

fjnFLDa5Zo

response.setCharacterEncoding（"UTF-8">。

try{

response.getWriter（>.write（jsonString>。

}catch（IOExceptione>{

e.printStackTrace（>。

}

}catch（Exceptione>{

e.printStackTrace（>。

}

}

该方法很简单，主要是通过server层的roleManagerService对象的

getSubTreeMenu（userID,parentID>方法返回一个List。

List封装的bean如下：

tfnNhnE6e5

privatelongid。

privatelongparentID。

privateStringname。

privateBooleanhasChild。

privateStringappendToHtml。

省略setter和getter

该bean比model多了一个是否有子菜单，和标签（记录在appendToHtml成员变量中>。

另外，这里有一个listToJson方法，是把list转换成json数据结构的方法，要实现该方法不难，这里不说了。

HbmVN777sL

然后，我们看一下roleManagerService中的getSubTreeMenu（userID,parentID>方法，如下：

V7l4jRB8Hs

publicListgetSubTreeMenu（StringuserID,longparentID>{83lcPA59W9

ListtreeMenuBeans=newArrayList（>。

mZkklkzaaP

Useruser=userDao.findUserByUserID（userID>。

Listroles=roleDao.findRoleByUser（user.getUserID（>>。

AVktR43bpw

IteratorroleIt=roles.iterator（>。

while（roleIt.hasNext（>>{

Rolerole=（Role>roleIt.next（>。

ListtreeMenus=treeMenuDao.getSubMenuByRoleID（role.getId（>,parentID>。

ORjBnOwcEd

IteratortreeMenuIt=treeMenus.iterator（>。

2MiJTy0dTT

while（treeMenuIt.hasNext（>>{

StringBufferappend=newStringBuffer（>。

TreeMenumenu=（TreeMenu>treeMenuIt.next（>。

TreeMenuBeantreeMenuBean=newTreeMenuBean（>。

treeMenuBean.setId（menu.getId（>>。

treeMenuBean.setParentID（parentID>。

treeMenuBean.setName（menu.getMenuName（>>。

booleanhasChild=treeMenuDao.hasChild（menu.getId（>>。

gIiSpiue7A

treeMenuBean.setHasChild（hasChild>。

if（hasChild>{

append.append（""+menu.getMenuName（>+"+">。

\"height=\"10px\"/>">。

uEh0U1Yfmh

}else{

append.append（"+"\">"+menu.getMenuName（>+"">。

IAg9qLsgBX

}

treeMenuBean.setAppendToHtml（append.toString（>>。

treeMenuBeans.add（treeMenuBean>。

}

}

returntreeMenuBeans。

}

这里主要是从dao层得到相应的菜单，然后转换成bean。

另外，如果有子菜单的话，这里bean中的appendToHtml中记录的是菜单名+右箭头，如果无子菜单了，给的就是菜单名WwghWvVhPE

这样的话，动态生成子菜单就完成了。

最后别忘了进入页面时应该生成根菜单，生成根菜单可以放在一个父action中，所有action继承自它。

得到根菜单的方法如下:

asfpsfpi4k

publicListgetTreeMenu（StringuserID>{

returnroleManagerService.getFristLevelTreeMenu（userID>。

ooeyYZTjj1

}

Service层中的方法如下：

publicListgetFristLevelTreeMenu（StringuserID>{BkeGuInkxI

ListtreeMenusSum=newArrayList（>。

PgdO0sRlMo

Useruser=userDao.findUserByUserID（userID>。

Listroles=roleDao.findRoleByUser（user.getUserID（>>。

3cdXwckm15

IteratorroleIt=roles.iterator（>。

while（roleIt.hasNext（>>{

Rolerole=（Role>roleIt.next（>。

ListtreeMenus=treeMenuDao.getFirstLeaveMenuByRoleID（role.getId（>>。

h8c52WOngM

IteratortreeMenuIt=treeMenus.iterator（>。

v4bdyGious

while（treeMenuIt.hasNext（>>{

TreeMenumenu=（TreeMenu>treeMenuIt.next（>。

treeMenusSum.add（menu>。

}

}

returntreeMenusSum。

}

仅仅是得到treeMenu的List，同时这里的List只包含父ID为0的菜单。