layui 复选框数据表格复选框全选取消全选

最新推荐文章于 2025-06-26 13:03:27 发布

Aimyone

最新推荐文章于 2025-06-26 13:03:27 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： layui 文章标签： layui javascript vue.js

本文链接：https://blog.csdn.net/qq_36636312/article/details/109598265

layui 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一个基于layui框架实现的权限管理系统，包括按钮控件、数据表格样式、全选与取消全选功能及保存权限的方法。该系统提供了上报权限和审核权限的管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，效果图：

在这里插入图片描述

2，全选，取消全选流程步骤图：

3，代码：

1，按钮控件


<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="reportall()">
   上报权限全选
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="reviewall()">
   审核权限全选
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="saveAuthority()">
   保存权限
</button>

2，数据表格样式


function yuangrid(data) {
        var table = layui.table;
        //第2个实例
        table.render({
            id: 'yuandatagrid',
            elem: '#yuandatagrid',
            height: "full-70",
            size: 'sm',
            filter:{
                bottom:false
            },
            page: true,
            limit:2000,
            limits: [1,15, 30, 50,100,200,500,5000,10000,20000,50000],
            cols: [
                [ //表头
                    // {type: 'checkbox' },bzclassname
                    {field: 'ID',title: 'id',width: 300,sortable: true,align:'center',halign: 'center'},
                    {field: 'submitright', title: '上报权限', width: 100, sortable: true, align:'left', halign: 'center',
                        templet:function(d){
                            if(d.submitright==0){
                                return "<input style=\"\" type=\"checkbox\" lay-skin=\"primary\"  name=\"submitright\" id=\""+d.ID+"_submitright\" />";
                            }else {
                                return "<input style=\"\" type=\"checkbox\" lay-skin=\"primary\"  name=\"submitright\" id=\""+d.ID+"_submitright\" checked />";
                            }
                        }},
                    {field: 'authright', title: '审核权限', width: 100, sortable: true, align:'left', halign: 'center',
                        templet:function(d){
                            if(d.authright==0){
                                return "<input style=\"\" type=\"checkbox\" lay-skin=\"primary\"  name=\"authright\" id=\""+d.ID+"_authright\" />";
                            }else {
                                return "<input style=\"\" type=\"checkbox\" lay-skin=\"primary\"  name=\"authright\" id=\""+d.ID+"_authright\" checked />";
                            }
                        }},
                    // {field: 'right', title: '操作', width: 60, align: 'center', templet: function (d) {
                    //         return '<a style="color: #409EFF;" lay-event="del">删除</a>'
                    //     }
                    // }
                ]
            ],
            data: data ? data : [],// 数据表格数据传递
            done: function () {
                layui.soulTable.render(this);
                // $("[data-field='ID']").css('display', 'none');
                // $("[data-field='typename']").css('display', 'none');
            }
        });
        //监听工具条
        // table.on('tool(yuantool)', function (obj) {
        //     var data = obj.data;
        //     var unitcode = data.unitcode;
        //     var userid = data.userid;
        //     if (obj.event === 'del') {
        //         layer.confirm('确定删除么?', function (index) {
        //             var postdata={userid:userid,unitcode:unitcode};
        //             $.getJSON("//", postdata, function (obj) {
        //                 if (obj.success) {
        //                     dLong.layerMsg(obj.msg)
        //                     yuandata();
        //                 } else {
        //                     dLong.layerMsg(obj.msg)
        //                     yuandata();
        //                 }
        //                 layer.close(index);
        //             });
        //         });
        //     }
        // });
    }

3，复选框全选与取消全选

// 上报权限全选
 function reportall() {
        if(selUserId==''){
            dLong.layerMsg("请选择用户!");
            return;
        }
        var yrows = layui.table.cache["yuandatagrid"]
        var flag=false;
        for(var i=0;i<yrows.length;i++){
            var idstr=yrows[i].ID+"_submitright";
            if(!$("#"+idstr).is(":checked")){
                flag=true;// 如果没有选中，则设置为选中状态
            }
        }
        for(var i=0;i<yrows.length;i++){
            var idstr=yrows[i].ID+"_submitright";
            // $("#"+idstr).attr("checked", flag);
            $("#"+idstr)[0].checked = flag;
        }
        layui.form.render("checkbox");
        layui.form.render();
    }


// 审核权限全选
    function reviewall() {
        if(selUserId==''){
            dLong.layerMsg("请选择用户!");
            return;
        }
        var yrows = layui.table.cache["yuandatagrid"]
        var flag=false;
        for(var i=0;i<yrows.length;i++){
            var idstr=yrows[i].ID+"_authright";
            if(!$("#"+idstr).is(":checked")){
                flag=true;
            }
        }
        for(var i=0;i<yrows.length;i++){
            var idstr=yrows[i].ID+"_authright";
            // $("#"+idstr).attr("checked", flag);
            $("#"+idstr)[0].checked = flag;
        }
        layui.form.render("");
        layui.form.render();
    }

4，保存权限


function saveAuthority() {
        if(selUserId==''){
            dLong.layerMsg("请选择用户!");
            return;
        }
        var yrows = layui.table.cache["yuandatagrid"]
        var rows=[];
        //循环行
        for(var i=0;i<yrows.length;i++){
            var row=yrows[i];
            var idauthright="#"+yrows[i].ID+"_authright";
            var idsubmitright="#"+yrows[i].ID+"_submitright";
            //是否选中
            var authright ="";var submitright="";
            // 转换为值状态，传入后台
            if($(idauthright).prop('checked')==true){
                authright='1'
            }else {
                authright='0'
            }
            if($(idsubmitright).prop('checked')==true){
                submitright='1'
            }else {
                submitright='0'
            }
                rows.push( {
                    ID:yrows[i].ID.substring(0,18)+selUserId.substring(0,18),
                    USERID:selUserId,
                    USERNAME:selUserName,
                    BZNAME:row.bzname,
                    BZCODE:row.bzcode,
                    AUTHRIGHT:authright,
                    SUBMITRIGHT:submitright
                });
            }
            var postdata ={
                ID: rows
            }
            $.postajax("//后台地址",postdata,function(data){
                if (data.success) {
                    dLong.layerMsg("操作成功");

                }else{
                    dLong.layerMsg(data.resultdata[0].errorinfo);
                }
            },true);
        }