查看: 2869|回复: 0

[HTML代码] 数据库控制动态菜单显示(SSM框架)

发表于 2018-1-22 08:00:06

数据库设计

数据库映射的POJO类

  1. @JsonIgnoreProperties(ignoreUnknown = true)
  2. @Table(name="MENU")
  3. public class Menu {
  4. @Id
  5. private String menuNumber; //菜单编号
  6. private String menuName; //菜单名称
  7. private String menuUrl; //菜单URL
  8. private String parentMenu; //父级菜单
  9. private Integer menuPermissions; //菜单访问权限
  10. //Setter和Getter及toString()省略
  11. }
复制代码

②通过mybaites访问数据的Mapper类

  1. public interface MenuMapper {
  2. //通过菜单的父级菜单和菜单的权限获取菜单(初始化时要获取所有的一级菜单)
  3. @Select("select * from MENU where LENGTHB(Parent_Menu) = #{menulevel} and Menu_Permissions=#{permissions}")
  4. List<Menu> selectMenuByLevelAndPer(@Param("menulevel")int menulevel,@Param("permissions")int permissions);
  5. }
  6. ③服务层Service
  7. ``
  8. @Service
  9. public class MenuServiceImp implements MenuService{
  10. @Autowired
  11. private MenuMapper menuMapper;
  12. @Override
  13. public List<Menu> getMenuByParent(String parentMenu,Integer menuPermissions) {
  14. // TODO Auto-generated method stub
  15. Menu menu = new Menu();
  16. menu.setParentMenu(parentMenu);
  17. menu.setMenuPermissions(menuPermissions);
  18. List<Menu> menuList = menuMapper.select(menu); //“menuMapper.select(menu)” 函数通过JPA实现
  19. return menuList;
  20. }
  21. @Override
  22. public List<Menu> getMenuByLevel(Integer menulevel,Integer menuPermissions) {
  23. // TODO Auto-generated method stub
  24. if(menulevel<=0) return null;
  25. //通过父级菜单查询
  26. System.out.println(menulevel+" ==== " + menuPermissions);
  27. if(menuPermissions==null)
  28. return menuMapper.selectMenuByLevel(menulevel);
  29. else
  30. return menuMapper.selectMenuByLevelAndPer(menulevel, menuPermissions);
  31. }
  32. }
复制代码

④控制器Controller

  1. @RequestMapping("/getMenuInit")
  2. public @ResponseBody List<Menu> getMenuInit(Integer perminsion){
  3. System.out.println("getMenuInit" +"=="+ perminsion);
  4. //System.out.println(menuService.getAllMenu().toString());
  5. return menuService.getMenuByLevel(1, perminsion);
  6. }
  7. @RequestMapping("/getMenu")
  8. public @ResponseBody List<Menu> getMenu(String parentMenu,Integer perminsion){
  9. System.out.println(" getMenu:" + parentMenu+" == "+ perminsion);
  10. //System.out.println(menuService.getAllMenu().toString());
  11. return menuService.getMenuByParent(parentMenu, perminsion);
  12. }
复制代码

⑤前端页面设计
初始化调 jQuery函数:访问所有的一级菜单

  1. ` var flag=0;
  2. $("#showDiv").html("")
  3. $.ajax(
  4. {
  5. url:"/menu/getMenuInit",
  6. data:{"perminsion":"2"},
  7. type:"post",
  8. dataType:"json",
  9. success:function(data)
  10. {
  11. for(var i=0;i<data.length;i++){
  12. var menu = data[i];
  13. $("#showDiv").append("<li class='nav-item'>"
  14. +"<a href='javascript:;'"
  15. +"onclick='getMenu("
  16. +menu.menuNumber+","
  17. +menu.menuPermissions+","
  18. +i+")'><i class='my-icon nav-icon icon_"+((i+1)%3+1)+"'></i><span>"+
  19. menu.menuName+
  20. "</span><i class='my-icon nav-more'></i></a></li>")
  21. }
  22. }
  23. })
复制代码
  1. 单击时调用函数
  2. ```
  3. function getMenu(parentMenu,perminsion,divid){
  4. var div = document.getElementById("showDiv").getElementsByTagName("li")[divid]
  5. if(parentMenu.length%2!=0)
  6. parentMenu="0"+parentMenu;
  7. if(div.getElementsByTagName("li").length>1){
  8. for(var i=0;i<div.getElementsByTagName("li").length;i++)
  9. div.getElementsByTagName("li")[i].innerHTML=""
  10. return false
  11. }
  12. $.ajax(
  13. {
  14. url:"/menu/getMenu",
  15. data:{"parentMenu":parentMenu,"perminsion":perminsion},
  16. type:"post",
  17. dataType:"json",
  18. success:function(data)
  19. {
  20. var HTML=div.innerHTML
  21. for(var i=0;i<data.length;i++){
  22. var menu = data[i];
  23. menuNumber=menu.menuNumber.substring(1,menu.menuNumber.length);
  24. HTML=HTML+"<li><a><span>"+menu.menuName+"</span></a></li>"
  25. }
  26. div.innerHTML = HTML;
  27. }
  28. });
复制代码

}

  1. ```
复制代码


回复

使用道具 举报