## 知识点
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">
<!--[if lt IE 9]><script src="https://static.jstree.com/3.3.4/assets/html5.js"></script><![endif]-->
<link rel="stylesheet" href="https://static.jstree.com/3.3.4/assets/dist/themes/default/style.min.css">
<!--[if lt IE 9]><script src="https://static.jstree.com/3.3.4/assets/respond.js"></script><![endif]-->
<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;
});
~~~
- Layer无刷新不跳转弹框提示信息
- 整合ThinkPHP+实用代码
- TP整合Layer插件实现无刷新
- 自定义助手函数
- 添加信息失败后不跳转
- 三种无限级分类
- TP常用代码
- 自定义公共函数
- TP模型管理专题
- TP模型管理之添加模型
- sfox_newmodel.sql
- TP模型管理之删除模型
- TP模型管理之编辑模型
- TP模型管理之字段添加
- sfox_newmodel.sql_edit
- layer_hplus.js_edit
- TP模型管理之字段删除
- TP模型管理之字段编辑
- TP模型管理之预览模型
- TP模型管理之公共函数
- layer_hplus.js_修订一
- TP模型管理之预览模型静态页
- 后台内容管理系统
- 分类树显示
- 内容列表显示
- 信息发布
- 编辑信息
- layer_hplus.js
- myJs第一版
- myJs第二版
- myJs第三版
- myJs第四版
- TP5插件用法
- Datatables
- WebUploader
- bootstrap-fileinput
- UEditor
- 简单调用
- 路径问题
- 跨域多图上传
- 跨域单图上传
- UEditor图片跨域上传解决方案
- 定制工具栏图标
- ajaxFileUpload
- LayUI
- 图片上传
- layui分页
- 搜索页
- 搜索优化及删除
- Uploadify
- TP5前端应用
- 静态首页
- 前台首页功能实现
- 自定义标签库
- 前台模板继承应用
- 首页自定义标签改进
- 文章内容页
- 自定义标签改进
- 自定义标签修正
- 图片等比例自动缩放
- 后台权限管理
- 角色管理
- 规则管理
- 权限设置
- 会员管理
- 权限管理
- 前台登录注册功能
- 注册登录
- 阿里大于手机注册
- 阿里大于升级阿里云短信服务
- 自动登录完成
- PHP异位或加密实现自动登陆
- 微信开发
- 分享接口
- 静态页面实现微信分享
- 动态页微信分享
- 页面静态化
- 1-全站静态化前期配置
- 2-链接地址静态化
- TP5常用片段代码
- 加载静态资源路径与常量
- thinkphp5预定义常量
- 删除某文件夹的内容
- 解压插件包
- 异步提交插件
- 其他功能
- 背景音乐
- 手机访问PC网站自动跳转到手机网站代码
- 手机微信音乐MP3播放器
- 后盾之网页背景音乐
- 播放器宽度自适应
- 前台首页数据调用
- 视频列表
- 搜索分页
- H5解决苹果（IOS）不能自动播放音乐
- 清空缓存
- 文件处理常识
- 删除路径下的所有文件夹和文件
- 一键清空缓存
- 评论留言
- 格式化时间
- 替换微博内容的URL地址@用户与表情
- PHP正则理解
- jQuery评论插件
- TP空操作
- TP路由
- 跨域访问
- 设置请其头允许跨域请求
- 模板前台判断手机访问跳转手机网址代码
- PHP遍历一个文件夹下所有文件和子文件夹
- PHP获取视频的第一帧与时长
- TP5数据库
- 链式操作原理
- update替换字段部分内容
- 后台开发
- 后台登录页居中显示
- TP5自带验证码
- JS & JQuery专题
- 二级城市联动菜单
- 模板引擎
- 混合模板编译
- 黄永成TP微博开发
- 消息推送
- memcache安装
- 插件开发
- 插件介绍
- 插件钩子
- 浅谈初步理解钩子
- 插件钩子(hooks)分析
- 插件钩子简单理解
- 控制器调用插件
- 钩子通用处理函数
- 插件基类代码
- 插件测试代码
- 浅谈钩子与插件
- 技术综合
- 常用代码
- PHP
- 56个PHP开发常用代码片段（上）
- 56个PHP 开发常用代码片段（中）
- 56个PHP 开发常用代码片段（下）
- sublime text安装自动补全注释的插件
- 影音视频开发
- 视频
- H5视频直播扫盲
- 音乐
- 语音
- PHP实现语音播报功能
- MUI
- 窗体操作