使用layui tree 组件做权限管理功能【TP5+layui】 

 1 <html>
 2 <head>
 3 <link rel="stylesheet" href="./layui.css">
 4 </head>
 5 <body>
 6     <form>
 7 
 8       <div class="layui-form-item">
 9           <div class="title">操作权限</div>
10           <div>
11             <div id="power-tree"></div>
12             <textarea id="powerInput" name="power" style="height:1px;overflow:hidden;width:1px;">{:$data.power?json_encode($data.power):''}</textarea>
13           </div>
14         </div>
15     </form>
16 </body>
17 <script src="./layui.js"></script>
18 <script>
19 layui.use(['form','tree'],function(){
20   var layer = layui.layer,
21       $ = layui.jquery,
22       tree = layui.tree,
23       form = layui.form;
24   //权限对象模版
25   var data = [
26       { 
27         id:2,title: '文章',model:'Article',spread:true,
28         children: [
29           { id:201,title: '文章列表',page:'index' },
30           { id:202,title: '新增文章',page:'add' },
31       ]},
32       { 
33         id:4,title: '分类',model:'Category',spread:true,
34         children: [
35           { id:401,title: '分类列表',page:'index' },
36           { id:402,title: '新增分类',page:'add' },
37       ]},
38       { 
39         id:5,title: '会员',model:'Member',spread:true,
40         children: [
41           { id:501,title: '会员列表',page:'index' },
42       ]}
43     ];
44     // 渲染
45     tree.render({
46       elem: '#power-tree',
47       id:'power-tree',
48       data: data,
49 50       showCheckbox: true,
51       oncheck: function(obj){
52         var checkedObj = tree.getChecked('power-tree');//获取选中列表
53         $('#powerInput').val(JSON.stringify(checkedObj));//权限数据加入表单
54       }
55     });
56 
57     var sqlData = {$data.power|json_encode};//php数据集
58     if(sqlData){
59       var checkIds = [];//回显选中ID集合
60       //循环取出回显id集合
61       sqlData.forEach(function(item){
62         //有子集被选中，只添加子集，防止set父级导致子集被全选
63         if(item.children) {
64           item.children.forEach(function(subitem){
65             checkIds.push(subitem.id);
66           });
67         } else {
68           //没有子集再set当前节点
69           checkIds.push(item.id);
70         }
71       })
72       
73       tree.setChecked('power-tree',checkIds);//回显选中的权限
74     }
75   });
76 </script>
77 </html>

 

posted @ 2024-08-15 11:05  枫落曳  阅读(34)  评论(0)    收藏  举报