Ztree小demo用于系统授权

简介: 本示例只做到指定id用户的拥有的权限回显,并能动态获得ztree中重新选择的权限id。(至于权限的更新,就是后台人员对象和权限对象建立关系的过程,不做展示)   第一步:拼写jsp页面(下载ztree包,把css,js库导入webroot下。

本示例只做到指定id用户的拥有的权限回显,并能动态获得ztree中重新选择的权限id。(至于权限的更新,就是后台人员对象和权限对象建立关系的过程,不做展示)

 

第一步:拼写jsp页面(下载ztree包,把css,js库导入webroot下。并在jsp页面上引用,将demo中ztree的显示代码贴上)如下

 1 <html>
 2   <head>
 3   
 4     <link rel="stylesheet" href="<%=request.getContextPath() %>/css/zTreeStyle/zTreeStyle.css" type="text/css">
 5     <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.4.min.js"></script>
 6     <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.ztree.core-3.5.js"></script>
 7     <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.ztree.excheck-3.5.js"></script>
 8     <script type="text/javascript">
 9    //ztree的Demo代码
10     var setting = {
11             check: {
12                 enable: true
13             },
14             data: {
15                 simpleData: {
16                     enable: true
17                 }
18             }
19         };
20           //ztree的Demo代码
21         var zNodes;
22         
23         
24         //当页面加载完毕,向后台发送ajax请求,获取用户id为1的用户所拥有的权限(这里要显示所有权限,该id用户的权限回显时,被自动选中)
25         function loadPower(){
26                     $.ajax({
27                         type:"post",
28                         url:"<%=request.getContextPath() %>/PowerAction!query",
29                         data:{"uid":1},
30                         async:false,
31                         dataType:"json",
32                         success:function(msg){
33                             zNodes=msg["tree"];
34                         }
35                             
36                     })
37             
38         }
39         
40         //用户重新选择权限时,获取选择权限的id,此处可以拼接权限id的字符串,到后台切割成数组。String.split(",")
41         function test(){
42             //获取被选中的节点集合
43             var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
44             var nodes = treeObj.getCheckedNodes(true);
45             //如果nodes的长度大于0说明ztree中有被选中的节点
46             if(nodes.length>0){
47                 for(var i=0;i<nodes.length;i++){
48                     var id=nodes[i]["id"];//获取选中节点的id
49                     var name=nodes[i]["name"];//获取选中节点的名字
50                     alert(id);
51                     alert(name);
52                 }
53             }else{
54                 alert("没有选中节点");
55             }
56             
57         }
58         
59         //页面加载完毕时加载此方法
60         $(document).ready(function(){
61             loadPower();
62             $.fn.zTree.init($("#treeDemo"), setting, zNodes);
63         });
64     </script>
65   </head>
66   
67   <body>
68   <div class="zTreeDemoBackground left">
69         <ul id="treeDemo" class="ztree"></ul>
70     </div>
71     <input type="hidden" name="uid" value="${uid }">
72     <input type="button" value="测试被选中的节点的id" onclick="test();" />
73   </body>
74 </html>
View Code

第二步:后台接受前台请求。action的方法和service加工数据的方法和dao层查询数据的方法

 

  1     /**
  2      * action层
  3      * 接受前台的ajax请求,获取所有权限(指定id用户拥有的权限,在回显成ztree节点时被选中)
  4     * @Title: query 
  5     * @Description: TODO(这里用一句话描述这个方法的作用) 
  6     * @return
  7     * @return String    返回类型 
  8     * @author 尚晓飞
  9     * @date 2014-9-29 下午3:45:42
 10      */
 11     public String query(){
 12         //响应对象
 13         PrintWriter out=null;
 14         try {
 15         //获取加工好的权限集合(指定id用户的权限在回显时被选中)
 16         List<Map<String,Object>> list=powerService.queryByStuId(uid);
 17         //获取响应对象
 18         HttpServletResponse resp=ServletActionContext.getResponse();
 19         //防止响应回去的数据乱码
 20         resp.setCharacterEncoding("utf-8");
 21         resp.setHeader("content-type", "text/html;charset=utf-8");
 22         resp.setContentType("text/html;charset=utf-8");
 23         //包装成json数据格式
 24         JSONObject jsonObject=new JSONObject();
 25         jsonObject.put("tree",list);
 26         //响应ajax请求
 27         out=resp.getWriter();
 28         out.print(jsonObject);
 29         } catch (IOException e) {
 30             // TODO Auto-generated catch block
 31             e.printStackTrace();
 32         }finally{
 33             out.close();
 34         }
 35 
 36         
 37         return null;
 38     }
 39 
 40 
 41 
 42 /**
 43      * service业务层
 44      * 用于加工前台需要的数据格式
 45      * (1)查询出所有的权限集合
 46      * (2)查询出指定id用户拥有的权限集合
 47      * (3)加工前台需要的数据集合
 48      *     注意点:hibernate从数据库中获取的对象都是单例模式,也就是说listOne.contains(power)是可以用于判断的
 49      *             因为list集合是有序可重复的容器。
 50     * @Title: queryByStuId 
 51     * @Description: TODO(这里用一句话描述这个方法的作用)
 52     * @author 尚晓飞
 53     * @date 2014-9-29 下午3:48:42
 54     * @param id
 55     * @return 
 56     * @see com.bjsxt.sxf.service.PowerService#queryByStuId(java.lang.Integer)
 57      */
 58     @Override
 59     public List<Map<String, Object>> queryByStuId(Integer id) {
 60         // TODO Auto-generated method stub
 61         //查询所有权限
 62         List<Power> listAll=powerDao.queryAll();
 63         //查询出指定id用户的权限
 64         List<Power> listOne=powerDao.queryByUid(id);
 65         //包装ztree
 66         List<Map<String, Object>> list=new ArrayList<Map<String,Object>>();
 67         Map<String, Object> map=null;
 68         //{ id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
 69         //需要加工成的模式。
 70         for(int i=0;i<listAll.size();i++){
 71             map=new HashMap<String, Object>();
 72             Power power=listAll.get(i);
 73             map.put("id",power.getId());
 74             map.put("pId",power.getParentId());
 75             map.put("name", power.getName());
 76             if(listOne!=null&&listOne.size()>0&&listOne.contains(power)){
 77                 map.put("checked",true);
 78                 map.put("open", true);
 79                 map.put("url",power.getUrl());
 80             }else{
 81                 map.put("checked",false);
 82                 map.put("open", false);
 83             }
 84             list.add(map);
 85         }
 86         return list;
 87     }
 88 
 89 
 90 /**
 91      * dao层
 92      * 查询出所有权限集合(hql语句)
 93     * @Title: queryAll 
 94     * @Description: TODO(这里用一句话描述这个方法的作用) 
 95     * @return
 96     * @return List<Power>    返回类型 
 97     * @author 尚晓飞
 98     * @date 2014-9-29 下午3:52:44
 99      */
100     public List<Power> queryAll(){
101         return hibernateTemplate.find("from Power");
102     }
103     
104     /**
105      * dao层
106      * 查询出指定用户id拥有的权限集合
107     * @Title: queryByUid 
108     * @Description: TODO(这里用一句话描述这个方法的作用) 
109     * @param id
110     * @return
111     * @return List<Power>    返回类型 
112     * @author 尚晓飞
113     * @date 2014-9-29 下午3:53:08
114      */
115     public List<Power> queryByUid(final Integer id){
116         return hibernateTemplate.execute(new HibernateCallback<List<Power>>() {
117 
118             @Override
119             public List<Power> doInHibernate(Session session)
120                     throws HibernateException, SQLException {
121                 // TODO Auto-generated method stub
122                 String sql="SELECT * from shang_power p where p.id IN (SELECT sp.power_id from stu_power sp where  sp.stu_id=?)";
123                 SQLQuery query=session.createSQLQuery(sql).addEntity(Power.class);
124                 query.setParameter(0, id);
125                 
126                 List<Power> list=query.list();
127                 return list;
128             }
129             
130         
131         });
132     }
View Code

 

相关文章
|
8月前
|
前端开发
入门css小demo,登录按钮
入门css小demo,登录按钮
53 0
|
4月前
|
API
el-autocomplete那些在饿了么官方文档看不到的API
el-autocomplete那些在饿了么官方文档看不到的API
|
9月前
|
缓存 前端开发 NoSQL
vue-element-admin实战 | 第二篇: 最小改动接入后台实现根据权限动态加载菜单
vue-element-admin实战 | 第二篇: 最小改动接入后台实现根据权限动态加载菜单
|
5月前
|
数据安全/隐私保护
vue3-admin-element框架登录如何修改?
vue3-admin-element框架登录如何修改?
|
6月前
|
前端开发
mui中使用ajax实现登录功能demo
mui中使用ajax实现登录功能demo
|
7月前
|
存储 小程序 前端开发
uniapp+node.js+mysql前后端微信小程序授权登录
uniapp+node.js+mysql前后端微信小程序授权登录
97 0
|
9月前
|
Web App开发 JavaScript 测试技术
工银e生活开发脱坑日志(4)工行页面及jsAPI交互接口hybrid_app.js登录情况说明
工银e生活开发脱坑日志(4)工行页面及jsAPI交互接口hybrid_app.js登录情况说明
131 0
jira学习案例36-ccs-in-js创建自定义组件
jira学习案例36-ccs-in-js创建自定义组件
53 0
jira学习案例36-ccs-in-js创建自定义组件
|
前端开发 JavaScript 数据安全/隐私保护
react + zarm + rc-form + crypto-js 实现个人中心页面,头像上传,密码重置,登录退出功能
react + zarm + rc-form + crypto-js 实现个人中心页面,头像上传,密码重置,登录退出功能
98 0
react + zarm + rc-form + crypto-js 实现个人中心页面,头像上传,密码重置,登录退出功能
|
人工智能 JavaScript API
使用图鉴 API 实现 js 脚本自动登录实践
通过调用图鉴图像识别 API 解析图片验证码实现网页 js 脚本自动登录