标签:ping 菜单 .ajax 实现 名称 动态菜单 code menus eth
① 数据库设计:数据库映射的POJO类
@JsonIgnoreProperties(ignoreUnknown = true)
@Table(name="MENU")
public class Menu {
@Id
private String menuNumber; //菜单编号
private String menuName; //菜单名称
private String menuUrl; //菜单URL
private String parentMenu; //父级菜单
private Integer menuPermissions; //菜单访问权限
//Setter和Getter及toString()省略
}
②通过mybaites访问数据的Mapper类
public interface MenuMapper {
//通过菜单的父级菜单和菜单的权限获取菜单(初始化时要获取所有的一级菜单)
@Select("select * from MENU where LENGTHB(Parent_Menu) = #{menulevel} and Menu_Permissions=#{permissions}")
List<Menu> selectMenuByLevelAndPer(@Param("menulevel")int menulevel,@Param("permissions")int permissions);
}
③服务层Service
``
@Service
public class MenuServiceImp implements MenuService{
@Autowired
private MenuMapper menuMapper;
@Override
public List<Menu> getMenuByParent(String parentMenu,Integer menuPermissions) {
// TODO Auto-generated method stub
Menu menu = new Menu();
menu.setParentMenu(parentMenu);
menu.setMenuPermissions(menuPermissions);
List<Menu> menuList = menuMapper.select(menu); //“menuMapper.select(menu)” 函数通过JPA实现
return menuList;
}
@Override
public List<Menu> getMenuByLevel(Integer menulevel,Integer menuPermissions) {
// TODO Auto-generated method stub
if(menulevel<=0) return null;
//通过父级菜单查询
System.out.println(menulevel+" ==== " + menuPermissions);
if(menuPermissions==null)
return menuMapper.selectMenuByLevel(menulevel);
else
return menuMapper.selectMenuByLevelAndPer(menulevel, menuPermissions);
}
}
④控制器Controller
@RequestMapping("/getMenuInit")
public @ResponseBody List<Menu> getMenuInit(Integer perminsion){
System.out.println("getMenuInit" +"=="+ perminsion);
//System.out.println(menuService.getAllMenu().toString());
return menuService.getMenuByLevel(1, perminsion);
}
@RequestMapping("/getMenu")
public @ResponseBody List<Menu> getMenu(String parentMenu,Integer perminsion){
System.out.println(" getMenu:" + parentMenu+" == "+ perminsion);
//System.out.println(menuService.getAllMenu().toString());
return menuService.getMenuByParent(parentMenu, perminsion);
}
⑤前端页面设计
初始化调 jQuery函数:访问所有的一级菜单
` var flag=0;
$("#showDiv").html("")
$.ajax(
{
url:"/menu/getMenuInit",
data:{"perminsion":"2"},
type:"post",
dataType:"json",
success:function(data)
{
for(var i=0;i<data.length;i++){
var menu = data[i];
$("#showDiv").append("<li class=‘nav-item‘>"
+"<a href=‘javascript:;‘"
+"onclick=‘getMenu("
+menu.menuNumber+","
+menu.menuPermissions+","
+i+")‘><i class=‘my-icon nav-icon icon_"+((i+1)%3+1)+"‘></i><span>"+
menu.menuName+
"</span><i class=‘my-icon nav-more‘></i></a></li>")
}
}
})
单击时调用函数
```
function getMenu(parentMenu,perminsion,divid){
var div = document.getElementById("showDiv").getElementsByTagName("li")[divid]
if(parentMenu.length%2!=0)
parentMenu="0"+parentMenu;
if(div.getElementsByTagName("li").length>1){
for(var i=0;i<div.getElementsByTagName("li").length;i++)
div.getElementsByTagName("li")[i].innerHTML=""
return false
}
$.ajax(
{
url:"/menu/getMenu",
data:{"parentMenu":parentMenu,"perminsion":perminsion},
type:"post",
dataType:"json",
success:function(data)
{
var HTML=div.innerHTML
for(var i=0;i<data.length;i++){
var menu = data[i];
menuNumber=menu.menuNumber.substring(1,menu.menuNumber.length);
HTML=HTML+"<li><a><span>"+menu.menuName+"</span></a></li>"
}
div.innerHTML = HTML;
}
});
}
```
标签:ping 菜单 .ajax 实现 名称 动态菜单 code menus eth
原文地址:http://blog.51cto.com/12848629/2060714