2022年ssh框架下用ajax动态从数据库查询的菜单 .pdf

《2022年ssh框架下用ajax动态从数据库查询的菜单 .pdf》由会员分享，可在线阅读，更多相关《2022年ssh框架下用ajax动态从数据库查询的菜单 .pdf（8页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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 页 - - - - - - - - -