角色管理视图代码详细解读

角色管理视图代码详细解读

概述：该页面的功能主要就是 新增、修改页面模态框的加载与渲染，我这里新增和修改用的是一个模态框，点击新增时就是正常的出现模态框，但是再点击修改时会触发点击时间函数，会传递当前表格行的基本信息，然后加载在模态框上，这样就实现了修改和新增模态框的区别，在这里有一个难点就是实现通过角色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">&times;</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的代码、没有写前端的代码、当时对于角色管理的理解远没有现在深入。