layui 数据表格选择框部分不可选

原创于 2020-07-07 18:26:10 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#layui数据表格

layui 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了使用layui框架进行数据表格操作的方法，包括分页设置、每页显示数量的定制、表格数据的状态检查及响应式设计。通过遍历表格数据，实现对特定状态行的选择框禁用和全选按钮的动态更新，确保了用户体验的一致性和数据操作的安全性。

直接上代码：

layui数据表格部分代码

    , page: true //是否显示分页
            , limits: [10, 20, 50, 100]
            , limit: 10 //每页默认显示的数量
            , id: "tableReload"
            , where: {}
            , text: {
                none: '暂无相关数据'
            },
            done:function (res, curr, count) {

                    var data = res.data;
                    var allck = true;

                    //遍历 表格数据所有行 有一行状态为0 则不能全选
                    for (var item in data) {
                        if (data[item].status == 0) { 

                            allck = false;
                            break;
                        }
                    }

                    if (!allck) { //为0  不可全选
                        $(".layui-table-header").find("input[name = 'layTableCheckbox'][lay-filter='layTableAllChoose']").each(function() {
                            $(this).attr("disabled", 'disabled').next().removeClass("layui-form-checked");
                            form.render('checkbox');
                        });
                    }

                    i = 0;
//遍历表格所有行  改行状态为0 则选择框不可选
                    $(".layui-table-fixed.layui-table-fixed-l").find(".layui-table-body").find("input[name='layTableCheckbox']").each(function() {
                        if (res.data[i].status == 0) {
                            $(this).attr("disabled", 'disabled').removeAttr("checked");
                            form.render('checkbox');
                        }
                        i++;
                    });
                

            }