博客系统新增权限时下拉框实现数据表的实时更新

概述

功能简介：

​ 权限新增在项目中我想实现的是在下拉框中选择顶级权限之后，展示全部权限的表格可以实时的更新，只展示该顶级权限的全部子权限，这样管理员在新增权限时就可以直观的看该顶级权限下面有多少子权限。

​ 在实现个人博客系统项目中的权限新增我一直以为是在下拉框改变时发送ajax请求再次加载表格，但是在自己实现时发现这样十分复杂，我发现了一种十分简单的解决方案，只需要在每次下拉框改变时设置表格行的显示和隐藏就可以实现，不需要重新发送ajax获取数据请求，需要我们在表的每一行设置一个标识符，就可以实现。

<div style="height: 800px">
    <!--新增权限模块 -->
    <div class="layui-form">
        <div class="layui-inline">
            <input type="text" id="auth_name" style="width: 120px;" placeholder="请输入权限名" class="layui-input">
        </div>
        <div class="layui-inline">
            <select id="is_menu" lay-filter="is_menu" style="width: 120px;">
                <option value="1">是否菜单权限(默认是)8</option>
                <option value="1">是</option>
                <option value="0">否</option>
            </select>
        </div>

        <div class="layui-inline">
            <input type="text" id="path" style="width: 120px;" placeholder="请输入url地址" class="layui-input">
        </div>
        <div class="layui-inline">
            <select id="auth" lay-filter="auth" style="width: 290px;">
                <option value="0">请选择菜单(默认顶级菜单)</option>
                <?php foreach($params as $v): ?>
                    <?php if($v['Auth']['pid'] == 0): ?>
                        <option value="<?= $v['Auth']['id'] ?>"><?= $v['Auth']['auth_name']?></option>
                    <?php endif; ?>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="layui-inline">
            <button type="button" id="submit"  class="layui-btn" >新增权限</button>
        </div>
    </div>
	<!--表格展示权限 -->
    <table class="layui-table">
    <thead>
        <tr>
            <th>编号</th>
            <th>权限名</th>
            <th>控制器方法名</th>
            <th>是否菜单权限</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <!--这里的数据表不展示顶级权限，只展示子权限-->
        <?php foreach($params as $v): ?>
        <?php if($v['Auth']['pid'] != 0): ?>
        <!--这里设置data-pid的值为该行权限数据的pid-->
        <tr data-pid = "<?=$v['Auth']['pid']?>">
            <td><?=$v['Auth']['id']?></td>
            <td><?=$v['Auth']['auth_name']?></td>
            <td><?=$v['Auth']['path']?></td>
            <td><?=$v['Auth']['is_menu']?></td>
            <td>
                <i class="layui-icon layui-icon-edit" onclick="change()"></i>
                <i class="layui-icon layui-icon-subtraction" onclick="del()"><a></a></i>
            </td>
        </tr>
        <?php endif; ?>
        <?php endforeach; ?>
    </tbody>
    </table>
</div>

<script>
    //layui控件的实现
    layui.use(['form', 'layedit', 'laydate'], function(){
        var layedit = layui.layedit;
        var laydate = layui.laydate;
        var form    = layui.form;
        //这里是layui的选择框改变时的调用方法
        form.on('select(auth)', function(data) {
            //获取选择框选中的值
            var val = data.value;
            //遍历table的tbody的全部tr 
            $("tbody tr").each(function () {
                //当选择框选中的值为空，也就是默认状态时展示该tr
                if (val == ""){
                    $(this).show(60);
                    //进入下一个循环
                    return;
                }
                //当选择框选择的值和当前tr的data-pid的值相同时展示该tr
                if (val ==$(this).data('pid')) {
                    $(this).show(60);
                    //进入下一个循环
                    return;
                }
                //除此之外就隐藏tr
                $(this).hide(60);
            })
        });
    });
    //数据提交
    $("#submit").click(function () {
        //参数设置
        var data = {
            'pid':$('#auth').val(),
            'auth_name':$('#auth_name').val(),
            'path':$('#path').val(),
            'is_menu':$('#is_menu').val(),
        }
        //ajax提交
        $.ajax({
            'url':'/auth/addAuth',
            'type':'post',
            'dateType':'json',
            'data':data,
            'success':function (code) {
                console.log(code);
                if (code == 200){
                    //成功先弹窗,0.6秒之后刷新链接
                    layui.use('layer',function () {
                        var layer = layui.layer;
                        layer.msg('新增成功');
                    })
                    //定时器
                    setTimeout(function(){
                        window.location.reload();
                    },800);
                }else {
                    layui.use('layer',function () {
                        var layer = layui.layer;
                        layer.msg('新增失败');
                    })
                }
            }
        })
    })

</script>

总结：

这里实现这个功能主要有以下几个方面
1、绑定select值改变事件，在select的值要和表中的标识数据有关联，比如我这里select的值是权限id，我这里的下拉框只有顶级权限。
2、设置表格每一行的标识数据，我这里设置的是pid：父级权限id，这样就可以关联起来。
3、在select绑定事件中对表格tbody进行遍历，展示符合条件的数据表的行，这里我因为我要展示的是顶级权限的全部自己权限，所以我这里设置的条件就是数据表行的pid的值等于select的值时就展示，其他的隐藏