權限設置 · TP5常用代碼

## 知識點 1、思路分析 2、彈出彈框 3、彈出彈框顯示規則 [TOC] ## 一、思路分析權限設置，是針對權限組，某個角色擁有哪些規則，每個規則都有一個單獨的ID auth_group中的字段rules，規則id就保存在rules字段下面，中間用逗號隔開點擊權限設置按鈕，彈出一個彈框，顯示所有的規則 ## 二、彈出彈框 layer是一款近年來備受青睞的web彈層組件官網：http://layer.layui.com/ ### （一）模板鏈接 ~~~ <a class="parentIframe" href="javascript:;" rel="{$vo.id}">權限設置</a> {volist name="authrolelist" id="vo"} <tr> <td>{$vo.id}</td> <td>{$vo.title}</td> <td>{$vo.remark}</td> <td>{$vo.status? '√' : '?'}</td> <td> <a class="parentIframe" href="javascript:;" rel="{$vo.id}">權限設置</a>  |   <a href="{:url('index',['id'=>$vo.id,'tab'=>3])}">編輯</a>  |   <a name="delete" href="{:url('delete',['id'=>$vo.id])}">刪除</a> </td> </tr> {/volist} ~~~ ### （二）事件響應 ~~~ <script> $('.parentIframe').on('click',function(){ layer.open({ type: 2, title: '權限設置', area: ['500px', '550px'], fixed: false, //不固定 maxmin: true, content: 'authset' }); }); </script> ~~~ ### （三）新建authset文件位置：application\admin\view\authrole\authset.html ### （四）后臺處理 ~~~ public function authset() { return view(); } ~~~ ## 三、彈出彈框顯示規則整合插件jstree ### （一）簡單實例 #### 1、引入類庫 ~~~ <link href="__ADMIN__/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet"> <link href="__ADMIN__/css/plugins/jsTree/style.min.css" rel="stylesheet"> <link href="__ADMIN__/css/animate.min.css" rel="stylesheet"> <link href="__ADMIN__/css/style.min862f.css?v=4.1.0" rel="stylesheet">  <link rel="stylesheet" href="https://static.jstree.com/3.3.4/assets/dist/themes/default/style.min.css">  <script src="__ADMIN__/js/jquery.min.js?v=2.1.4"></script> <script src="__ADMIN__/js/bootstrap.min.js?v=3.3.6"></script> <script src="__ADMIN__/js/content.min.js?v=1.0.0"></script> <script src="__ADMIN__/js/plugins/jsTree/jstree.min.js"></script> ~~~ #### 2、模板代碼 ~~~ <div id="jstree"></div> ~~~ #### 3、事件響應 ~~~ <script> $('.parentIframe').on('click',function(){ var role_id = $(this).attr('rel'); layer.open({ type: 2, title: '權限設置', area: ['500px', '550px'], fixed: false, //不固定 maxmin: true, content: 'authset/id/' + role_id }); }); </script> ~~~ ### （二）動態獲取信息 #### 1、響應事件 ~~~ <script> $(function() { $('#jstree').jstree({ "plugins" : [ "checkbox" ], "checkbox" : { "keep_selected_style" : false }, "core" : { "data" : {$json} } }); }); </script> ~~~ #### 2、獲取規則 ~~~ public function authset() { // 獲取規則 $result = Db::name('auth_rule')->order('listorder')->select(); $json = array(); foreach ($result as $value) { $data = array( 'id' => $value['id'], 'parent' => $value['pid']==0 ? '#' : $value['pid'], 'text' => $value['title'], ); $json[] = $data; } $this->assign('json', json_encode($json)); return view(); } ~~~ #### 3、模板表單 ~~~ <form method="post" class="form-horizontal" action="{:url('authset')}" data-type="ajax" style="padding:30px"> <input type="hidden" name="id" value="{:input('id',0)}"> <input type="text" name="rules"> <div id="jstree"></div> <div class="form-group" style="margin: 30px 80px"> <button class="btn btn-primary" type="submit">提交</button> </div> </form> ~~~ #### 4、默認全部展開 ~~~ public function authset() { if(request()->isPost()){ $data = input('post.'); Db::name('auth_group')->strict(false)->update($data); return success('權限設置成功!',url('index',['tab'=>1])); }else{ // 獲取規則 $result = Db::name('auth_rule')->order('listorder')->select(); $json = array(); foreach ($result as $value) { $data = array( 'id' => $value['id'], 'parent' => $value['pid']==0 ? '#' : $value['pid'], 'text' => $value['title'], 'state' => ['opened' => true] //默認全部展開 ); $json[] = $data; } $this->assign('json', json_encode($json)); return view(); } } ~~~ #### 5、選中ID ~~~ 表單 <input type="hidden" id="event_result" name="rules"> 事件響應 $(function() { $('#jstree').jstree({ "plugins" : [ "checkbox" ], "checkbox" : { "keep_selected_style" : false }, "core" : { "data" : {$json} } }) .on('changed.jstree', function (e, data) { var i, j, r = []; for(i = 0, j = data.selected.length; i < j; i++) { r.push(data.instance.get_node(data.selected[i]).id); } $('#event_result').val(r.join(',')); }); }); </script> ~~~ #### 6、提交數據后臺保存數據庫 ~~~ $data = input('post.'); Db::name('auth_group')->strict(false)->update($data); return success('權限設置成功!',url('index',['tab'=>1])); ~~~ #### 7、打開權限默認勾選 ~~~ 'state' => ['opened' => true, 'selected' => in_array($value['id'],$rules)? true : false] public function authset($id = 0) { if(request()->isPost()){ $data = input('post.'); Db::name('auth_group')->strict(false)->update($data); return success('權限設置成功!',url('index',['tab'=>1])); }else{ // 獲取當前角色所有規則 $rules =Db::name('auth_group')->where('id',$id)->value('rules'); //規則轉數組 $rules = explode(',',$rules); // 獲取規則 $result = Db::name('auth_rule')->order('listorder')->select(); $json = array(); foreach ($result as $value) { $data = array( 'id' => $value['id'], 'parent' => $value['pid']==0 ? '#' : $value['pid'], 'text' => $value['title'], 'state' => ['opened' => true, 'selected' => in_array($value['id'],$rules)? true : false] ); $json[] = $data; } $this->assign('json', json_encode($json)); return view(); } } ~~~ #### 8、彈框處理 ~~~ <script src="__ADMIN__/js/plugins/layer/layer.min.js"></script> <script src="__ADMIN__/js/layer_hplus.js"></script> ~~~ 放文件最底部 #### 9、關閉彈框返回重新定義一個跳轉函數successIframe() 自定義successIframe助手函數位置：application\common.php ~~~ function successIframe($msg = '成功', $url = '') { $data['status'] = 201; $data['msg'] = $msg; return json($data); } ~~~ 修改layer_hplus.js ~~~ $(document).on('submit','form[data-type=ajax]',function(){ //獲取數據 var url = $(this).attr('action'); var data = $(this).serializeArray();//序列化表單元素 //彈出詢問框 layer.confirm('您確定提交處理嗎?',{icon:3, title:'提示'},function(index){ //異步提交 $.ajax({ type: "POST", dataType:"json", url:url, data:data, success:function(obj){ var icon_num = (obj.status==202) ? 2 : 1; if(obj.status==200 || obj.status==202){ layer.open({ content: obj.msg, btn: ['確定'], shade: 0.1, icon: icon_num, yes: function(index, layero){ if(obj.url){ location.href = obj.url; //跳轉指定地址 }else{ layer.close(index); } }, cancel: function(){ if(obj.url){ location.href = obj.url; //跳轉指定地址 }else{ layer.close(); } }, }); }else if(obj.status==201){ layer.open({ content: obj.msg, btn: ['確定'], shade: 0.1, icon: icon_num, yes: function(index, layero){ var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); }, cancel: function(){ layer.close(); }, }); } }, error:function(data){ layer.alert('網絡故障!'); } }); }); return false; }); ~~~