在项目中,我们经常会需要一些树状结构的样式来显示层级结构,菜单等,利用Jquery的一些插件,可以实现这些效果的,如Jquery.treeview。jquery treeview树控件是一款非常实用的jquery插件。
参数说明
- 参数说明参看 jQuery treeview 插件参数说明
- 其中 url :String : 异步加载时,设置url地址。需要返回的是一个json数组。
- json数组相关节点的属性如下:12345678910[{text : String // 文本hasChildren : boolean // 是否有子菜单children :json[] // 子菜单信息expanded : boolean // 是否展开classes : String // 样式们 class="aa bb cc "id :String // 唯一标识}]
在项目中导入相关的文件
- 下载文件,treeview开源地址:https://github.com/jzaefferer/jquery-treeview
- 将treeview导入项目[app]/js/,
其中:- jquery-1.8.3.js treeview依赖jquery库
- images文件夹 插件相关的图标文件
- screen.css 屏幕显示相关css
- jquery.treeview.css 核心css
- jquery.treeview.min.js 核心js
- jquery.treeview.async.js 支持异步
- jquery.cookie.js 支持缓存
页面的实现
新建一个menu.jsp文件,用于菜单结构的异步加载显示
web层实现
在MenuAction类中添加showMenu()方法,用于菜单显示数据的处理
业务层实现
业务层接口
12345678910111213141516171819//开启事务public interface MenuEbi {/*** 获取指定员工可操作的一级菜单** @param uuid 员工uuid* @return*/public List<MenuModel> getAllOneLevelByEmp(Long uuid);/*** 获取指定员工对应的指定一级菜单可操作的二级菜单* @param uuid 员工uuid* @param puuid 一级菜单uuid* @return*/public List<MenuModel> getByEmpAndPuuid(Long uuid, Long puuid);}业务层实现类
123456789public class MenuEbo implements MenuEbi {public List<MenuModel> getAllOneLevelByEmp(Long uuid) {return menuDao.getAllOneLevelByEmp(uuid);}public List<MenuModel> getByEmpAndPuuid(Long uuid, Long puuid) {return menuDao.getByEmpAndPuuid(uuid, puuid);}}
持久层实现
持久层接口
12345public interface MenuDao {public List<MenuModel> getAllOneLevelByEmp(Long uuid);public List<MenuModel> getByEmpAndPuuid(Long uuid, Long puuid);}持久层实现类
123456789101112131415161718public class MenuImpl extends HibernateDaoSupport implements MenuDao {/*** 获取系统菜单的子菜单*/public List<MenuModel> getAllOneLevelByEmp(Long uuid) {// menu->role->empString hql = "select distinct menu from MenuModel menu join menu.roles role join role.emps emp where emp.uuid = ? and menu.parent.uuid = ? order by menu.uuid";return this.getHibernateTemplate().find(hql, uuid, MenuModel.MENU_SYSTEM_MENU_UUID);}/*** 获取指定菜单的子菜单*/public List<MenuModel> getByEmpAndPuuid(Long uuid, Long puuid) {String hql = "select distinct menu from MenuModel menu join menu.roles role join role.emps emp where emp.uuid = ? and menu.parent.uuid = ? order by menu.uuid";return this.getHibernateTemplate().find(hql, uuid, puuid);}}
页面显示
在主页面main.jsp中相应位置引入 menu.jsp
123<div class="left-bottom"><%@include file="/WEB-INF/jsps/tools/menu.jsp"%></div>最终效果:
总结
- 利用 jQuery treeview 实现树状效果十分方便,本次使用了它的异步加载实现了菜单功能,而其他的实现也是类似的,熟悉之后也能轻松的使用.