角色管理视图代码详细解读
概述：该页面的功能主要就是 新增、修改页面模态框的加载与渲染，我这里新增和修改用的是一个模态框，点击新增时就是正常的出现模态框，但是再点击修改时会触发点击时间函数，会传递当前表格行的基本信息，然后加载在模态框上，这样就实现了修改和新增模态框的区别，在这里有一个难点就是实现通过角色id获取角色的权限，然后通过权限渲染复选框的选中，这里我是通过在点击修改按钮是发送ajax请求传递role_id获取到该角色的权限数组，然后使用jquery函数遍历全部的权限复选框，这里权限复选框的值是权限id，在遍历时只要当前复选框的值权限id在权限数组中那么就设置该复选框选中，这样就实现了正确通过角色id渲染复选框的选中。还有一些就是比较基础的ajax请求。可能表述不清，在下面的代码中我将我认为需要标注的地方都进行了标注。
<!--start面包屑导航-->
<div style="margin-bottom: 5px">
<span class="layui-breadcrumb">
<a href="">首页</a>
<a><cite>角色管理</cite></a>
</span>
</div>
<!--end面包屑导航-->
<!--start点击出现新增角色模态框-->
<button type="button" onclick="add()" class="layui-btn" data-toggle="modal" data-target="#myModal" >新增角色</button>
<!--end点击出现新增角色模态框-->
<!--start表格展示角色信息-->
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<tr>
<th>编号</th>
<th>角色名</th>
<th>管理员列表</th>
<th>描述</th>
<th>操作</th>
</tr>
<?php foreach($params as $v): ?>
<tr>
<td><?=$v['Role']['id']?></td>
<td><?=$v['Role']['role_name']?></td>
<td><?=$v['Role']['name']?></td>
<td><?=$v['Role']['desc']?></td>
<td>
<!--不能编辑、删除超级管理员-->
<?php if($v['Role']['id'] == 1): ?>
<?php else: ?>
<a class="layui-icon layui-icon-edit" data-toggle="modal" data-target="#myModal" onclick="edit(<?= $v['Role']['id']?>,'<?= $v['Role']['role_name']?>','<?= $v['Role']['desc']?>')"></a>
<a class="layui-icon layui-icon-subtraction" onclick="del(<?= $v['Role']['id']?>)"></a>
<?php endif; ?>
</td>
</tr>
<?php endforeach; ?>
</table>
<!--end表格展示角色信息-->
<!--start新增、编辑模态框-->
<div class="modal fade" id="myModal" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document" >
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" onclick="close1()" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">角色操作</h4>
</div>
<div class="modal-body">
<div class="layui-form" style="width: 60%;margin-top: 20px;">
<div class="layui-form-item">
<label class="layui-form-label">角色名</label>
<div class="layui-input-block">
<input type="hidden" id="id" class="layui-input">
<input type="text" id="username" placeholder="请输入角色名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" >角色描述</label>
<div class="layui-input-block">
<input type="text" id="desc" placeholder="请输入角色描述" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" >网站权限</label>
<div class="layui-input-block layui-tab layui-tab-brief" style="width: 500px" lay-filter="demo">
<ul class="layui-tab-title">
<!--遍历全部权限-->
<?php foreach($auth as $v1): ?>
<!--只展示顶级权限作为内容切换菜单的值-->
<?php if($v1['pid'] == 0): ?>
<li data-id="<?=$v1['id']?>"><?=$v1['auth_name'];?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
<div class="layui-tab-content">
<!--遍历全部权限-->
<?php foreach($auth as $v1): ?>
<!--当为顶级菜单时-->
<?php if($v1['pid'] == 0): ?>
<div class="layui-tab-item">
<!--遍历全部权限-->
<?php foreach($auth as $v2): ?>
<!--当前权限的pid也就是父级id等于上面的顶级权限时-->
<?php if($v1['id'] == $v2['pid'] ): ?>
<!--显示当前顶级权限的全部子权限，value为id、title为auth_name-->
<input type="checkbox" name="auth" lay-skin="primary" value="<?= $v2['id']?>" title="<?=$v2['auth_name']?>">
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="close1()" data-dismiss="modal">返回</button>
<button type="button" id="ajax_submit1" class="btn btn-primary">提交</button>
</div>
</div>
</div>
</div>
<!--end新增、编辑模态框-->
<script>
//关闭模态框重新加载,保持最新的数据
function close1(){
window.location.reload();
}
//layui加载
layui.use(['element','form','layer'],function(){
var element = layui.element;
var form = layui.form;
var layer = layui.layer;
//提交修改
$("#ajax_submit1").click(function () {
//定义一个数组存放全部选中的权限
var auth_array = new Array();
//遍历全部已经选择的权限复选框
$('input[name=auth]:checked').each(function () {
//选中的权限id加入到数组中
auth_array.push($(this).val());
});
//将权限id数组拆分成字符串以“,”间隔例子:1,2,3,4,6,7
var auth_str = auth_array.join(',');
//定义post请求数据
var data = {
'id':$('#id').val(),
'role_name':$('#username').val(),
'desc':$('#username').val(),
'auth_ids':auth_str,
}
//发送ajax请求修改权限
$.ajax({
'url':'/Role/dellRole',
'data':data,
'type':'post',
'dataType':'json',
'success':function (res) {
if (res.code == 400){
layer.msg("操作失败!");
}else if(res.code == 200){
layer.msg("操作成功!");
}
//延时0.8秒刷新页面
setTimeout(function () {
window.location.reload();
},800)
}
});
})
});
//点击修改时渲染模态框页面
function edit(role_id,role_name,desc) {
//通过role_id获取角色的权限
var data ={
'role_id':role_id,
};
//username和desc可以直接赋值
$("#username").val(role_name);
$("#desc").val(desc);
//这里赋值id是为了后面区分是修改操作还是新增操作。
$('#id').val(role_id);
//发送ajax请求获取数据渲染页面
$.ajax({
'url': '/Role/roleFindRole',
'type':'post',
'data':data,
'dataType':'JSON',
'success':function (res) {
//array是为了将传递过来的数组值转化为int型重新存储，不转化的话使用不了下面的inArray函数。
var array = new Array();
//转化int转存
$.each(res,function (data,value) {
array.push(parseInt(value));
});
//遍历全部的权限复选框
$('input[name=auth]').each(function () {
//定义cat为获取到当前遍历的权限id
var cat = parseInt($(this).val());
//当前遍历的权限id在权限数组中时说明该角色拥有该权限，故应该选中
if ($.inArray(cat,array) != -1) {
//设置当前遍历的复选框选中
$(this).attr("checked",true);
//layui更新渲染，防止页面效果未更新
layui.form.render();
}
});
},
});
}
//删除角色信息
function del(role_id) {
//传递角色id
var data = {
'role_id':role_id
}
//ajax删除信息，下面代码与修改页面差别不大，不赘述。
$.ajax({
'url':'/Role/delRole',
'type':'post',
'dataType':'Json',
'data':data,
'success':function (res) {
if (res.code ==200){
layui.use('layer',function () {
var layer = layui.layer;
layer.msg('删除成功');
})
}else{
layui.use('layer',function () {
var layer = layui.layer;
layer.msg('删除失败');
})
}
setTimeout(function () {
window.location.reload();
},800);
}
});
}
</script>
页面展示
总结：
这个功能的实现主要使用的是jquery函数比如：each遍历函数、inArray():是否在数组中、push：向数组中插入数据等，这里也用到了一些php的多重遍历以及多重遍历的条件判断。之前很早实现角色管理自己只写了后端php的代码、没有写前端的代码、当时对于角色管理的理解远没有现在深入。