《2022年ssh框架下用ajax动态从数据库查询的菜单 .pdf》由会员分享,可在线阅读,更多相关《2022年ssh框架下用ajax动态从数据库查询的菜单 .pdf(8页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、动态菜单的构建,即使用ajax 异步与服务器通信,实时以局部刷新的方式从数据库取出菜单。这里把我的实现记录下来,以备以后维护升级。1、首先是model 层publicclassTreeMenu private Long id ; private Long parentID; private String menuName ; private String url;setter,getter省略2、Dao 层数据库映射 数据库的操作主要用到通过角色来取出菜单,判断是否有子菜单的操作按角色取出所有菜单public ListgetTreeMenuByRoleID(longroleID) return
2、getHibernateTemplate().find(select b from Role a join a.treeMenu b where a.id=?, newObjectroleID); 按角色取出根菜单public ListgetFirstLeaveMenuByRoleID(longroleID) r eturngetHibernateTemplate().find(select b from Role a join a.treeMenu b where a.id=? andb.parentID=0, new ObjectroleID); 判断是否有子菜单publicboolean
3、hasChild(long id) return !getHibernateTemplate().find(from TreeMenu a where a.parentID=?, new Objectid).isEmpty(); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页,共 8 页 - - - - - - - - - 数据库中存的结构如下所示:3、思路及关键实现下面将要讲到关键的地方,首先就得把思路说一下,思路是先显示parentID为 0 的菜单, 也就是每个菜单的根
4、部。当点击根菜单的时候,再将下面的子菜单通过异步的方式取出。效果如下:这里的话,我就自顶向下的方式说明。首先是前台的jsp,主要代码如下:ul id =parent class=aimg id =downDetail src = /images/downDetail.jpg onclick=display( , );align=topheight=10px/ 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页,共 8 页 - - - - - - - - - 表格的第一列存的是菜单
5、,第二列存的是箭头。菜单是通过一个List迭代出来的。 这里的关键是用到一个js 。js代码如下:var xmlHttp; var createMenuHistory=new Array(); var userIDAllScope; functioncreateXmlHttp() if(window.ActiveXObject) xmlHttp=new ActiveXObject(Microsoft.XMLHTTP); elseif(window.XMLHttpRequest) xmlHttp=new XMLHttpRequest(); returnxmlHttp; function disp
6、lay(userID,parentID) userIDAllScope=userID; /alert(userID+parentID);var flag=true; /alert(createMenuHistory.length);for( var i=0;icreateMenuHistory.length;i+) /alert(is not frist);/alert(createMenuHistoryi);if(createMenuHistoryi=parentID) flag=false; break; if(flag=true) /alert(is not exists+ +flag)
7、;if(createMenuHistory.length=0) /alert(is frist);createMenuHistory0=parentID; else createMenuHistorycreateMenuHistory.length=parentID; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页,共 8 页 - - - - - - - - - var queryString=userID=+userID+&parentID=+parentID; xmlHt
8、tp=createXmlHttp(); /alert(xmlHttp);xmlHttp.open(POST , jsonSubMenu, true); xmlHttp.setRequestHeader(Content-Type, application/x-www-form-urlencoded); xmlHttp.onreadystatechange=getSubMenuComplete; /alert(it is worked);xmlHttp.send(queryString); else /alert(is exists+ +flag);var target=document.getE
9、lementById(parent+parentID); var showHide=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; var child=target.childNodes for( var i=1;ichild.length;i+) childi.className
10、=show; elseif(showHide=a) target.className=b; var child=target.childNodes for( var i=1;ichild.length;i+) if(childi.tagName!=SPAN ) childi.className=hide; functiongetSubMenuComplete() 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页,共 8 页 - - - - - - - - - if(xmlHtt
11、p.readyState=4 &xmlHttp.status=200) eval(json=+xmlHttp.responseText+;); /alert(xmlHttp.responseText);for( var i=0;ijson.menus.length;i+) vartarget=document.getElementById(parent+json.menusi.parentID); var ulElmt= document.createElement(UL ); var id=parent+json.menusi.id; ulElmt.setAttribute(id,id);
12、ulElmt.setAttribute(class, a); ulElmt.innerHTML=json.menusi.appendToHtml; target.appendChild(ulElmt); 这里,我们需要一个数组来记录哪些父菜单被展开了,展开一个菜单,把菜单ID 放入数组中,这里是createMenuHistory。另外用到一个Class, a 和 b 来表示展开或隐藏的情况 。如果要展开菜单,则发送异步请求到jsonSubMenu这个 Action。通过这个Action,将得到一个 json数据,格式如下:menus:id:12,parentID:11,name:采购订单查询
13、, hasChild:false,appendToHtml:采购订单查询,id:14,parentID:11,name:供应商发货清单,hasChild:false,appendToHtml:供 应 商 发 货 清 单 在该数据中包含了id ,父菜单 id ,菜单名,是否有子菜单,本身的地址信息。然后把这些信息逐个包装成UL,加入到对应的父菜单的UL 中。下面我们看一下jsonSubMenu是如何得到这个json数据的:publicvoidgetSubTree() throwsIllegalArgumentException, NoSuchFieldException, NoSuchMetho
14、dException, IllegalAccessException, InvocationTargetException try ListtreeMenuBeans=roleManagerService.getSubTreeMenu( userID, parentID); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页,共 8 页 - - - - - - - - - IteratortreeMenuBeanIt=treeMenuBeans.iterator(); while
15、(treeMenuBeanIt.hasNext() TreeMenuBeantreeMenuBean=(TreeMenuBean) treeMenuBeanIt.next(); listToJson(menus,treeMenuBean); listToJsonEnd(); HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding(UTF-8); try response.getWriter().write(jsonString); catch (IOExce
16、ption e) e.printStackTrace(); catch(Exception e) e.printStackTrace(); 该方法很简单,主要是通过server层的 roleManagerService对象的getSubTreeMenu(userID, parentID) 方法返回一个List。 List封装的 bean 如下:privatelongid ; privatelongparentID; private String name ; private Boolean hasChild; private String appendToHtml; 省略 setter和get
17、ter 该bean 比model 多了一个是否有子菜单,和标签( 记录在 appendToHtml成员变量中 ) 。另外 ,这里有一个 listToJson方法,是把 list转换成 json数据结构的方法,要实现该方法不难,这里不说了。然后,我们看一下roleManagerService中的 getSubTreeMenu(userID, parentID) 方法,如下:public ListgetSubTreeMenu(String userID,longparentID) ListtreeMenuBeans=new ArrayList(); User user=userDao.findUs
18、erByUserID(userID); List roles=roleDao.findRoleByUser(user.getUserID(); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页,共 8 页 - - - - - - - - - IteratorroleIt=roles.iterator(); while(roleIt.hasNext() Role role=(Role) roleIt.next(); ListtreeMenus=treeMenuDao.getSub
19、MenuByRoleID(role.getId(),parentID); IteratortreeMenuIt=treeMenus.iterator(); while(treeMenuIt.hasNext() StringBuffer append=new StringBuffer(); TreeMenu menu=(TreeMenu) treeMenuIt.next(); TreeMenuBeantreeMenuBean=new TreeMenuBean(); treeMenuBean.setId(menu.getId(); treeMenuBean.setParentID(parentID
20、); treeMenuBean.setName(menu.getMenuName(); booleanhasChild=treeMenuDao.hasChild(menu.getId(); treeMenuBean.setHasChild(hasChild); if(hasChild) append.append(+menu.getMenuName()+); else append.append(+menu.getMenuName()+); treeMenuBean.setAppendToHtml(append.toString(); treeMenuBeans.add(treeMenuBea
21、n); returntreeMenuBeans; 这里主要是从dao层得到相应的菜单,然后转换成bean。另外,如果有子菜单的话,这里bean 中的appendToHtml 中记录的是 菜单名 +右箭头 ,如果无子菜单了,给的就是 菜单名 这样的话,动态生成子菜单就完成了。最后别忘了进入页面时应该生成根菜单,生成根菜名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页,共 8 页 - - - - - - - - - 单可以放在一个父action中,所有 action继承自它。得到根
22、菜单的方法如下: public ListgetTreeMenu(String userID) returnroleManagerService.getFristLevelTreeMenu(userID); Service层中的方法如下:public ListgetFristLevelTreeMenu(String userID) ListtreeMenusSum=new ArrayList(); User user=userDao.findUserByUserID(userID); List roles=roleDao.findRoleByUser(user.getUserID(); Iter
23、atorroleIt=roles.iterator(); while(roleIt.hasNext() Role role=(Role) roleIt.next(); ListtreeMenus=treeMenuDao.getFirstLeaveMenuByRoleID(role.getId(); IteratortreeMenuIt=treeMenus.iterator(); while(treeMenuIt.hasNext() TreeMenu menu=(TreeMenu) treeMenuIt.next(); treeMenusSum.add(menu); returntreeMenusSum; 仅仅是得到 treeMenu的List,同时这里的List只包含父 ID 为0的菜单。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页,共 8 页 - - - - - - - - -