layui 数据表单根据返回的数据判断是否显示checkbox

小码哥 2021-07-22

2396

根据已有的数据来判断接口返回的数据是否可以再次被选择

后端模拟接口（laravel）

public function submit(){
    //模拟接口
    $users =DB::table('art_post')->get();
            $res=[
                'code'=>0,
                'data'=>$users
            ];
    return json_encode($res);
}

前端html 页面

<link rel="stylesheet" type="text/css" href="layui/css/layui.css">

<body>
<div style="margin-bottom: 5px;">
    <div id="table-main">
        <span class="layui-btn" id="getselect">确定</span>
        <table class="layui-table" id="idTest" lay-filter="demo"></table>
    </div>
</div>
</body>

<script type="text/javascript"   src="layui/layui.js"></script>

<script>
    layui.use(['table', 'jquery', 'form', 'layer'], function() {
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var tableIns = table.render({ //其它参数在此省略
            elem: '#idTest',
            id: 'idTest',
            url: 'http://www.laraverl.com/submit', // 注意：如果你直接复制所有代码到本地，数据请求需要本地返回数据
            cols: [[ //表头
                // {type: 'checkbox', fixed: 'left'}
                {checkbox: true, fixed: true},
                {field: 'id', title: '封面', align:'center'},
                {field: 'list_order', title: '积分', width: 90, sort: true, totalRow: true},
                {field: 'post_title', title: '性别', width:80, sort: true},
                {field: 'post_keywords', title: '评分', width: 80, sort: true, totalRow: ' 分'},
                {field: 'post_excerpt', title: '城市', width:150},
                {field: 'post_source', title: '签名', width: 200},
                {field: 'post_content', title: '职业', width: 100},
                {field: 'post_titlem', title: '财富', width: 135, sort: true, totalRow: true},
                // {fixed: 'post_contentm ', width: 150, align:'center', toolbar: '#barDemo'}
            ]],
            where: {}, //如果无需传递额外参数，可不加该参数
            limits: [10, 15, 20, 40, 60, 80],
            limit: 10,
            page: true, //开启分页
            done: function(res, curr, count) {
                var arr = [1,2,4];  //模拟数据
                var data = res.data;
                var allck = true;
                for (var item in data) {
                    if (arr.indexOf(data[item].id)!== -1) { //关键点如果data中score包含57那么就不能全选
                        allck = false;
                    }
                    break;
                }
                if (!allck) {
                    $(".layui-table-header").find("input[name = 'layTableCheckbox'][lay-filter='layTableAllChoose']").each(function() {
                        $(this).attr("disabled", 'disabled').next().removeClass("layui-form-checked");
                        form.render('checkbox');
                    });
                }
                var i = 0;
                $(".layui-table-body.layui-table-main").find("input[name='layTableCheckbox']").each(function() {
                    if (arr.indexOf(res.data[i].id) != -1) { //关键点如果当前行数据中score包含57那么就不可选
                        $(this).attr("disabled", 'disabled').removeAttr("checked");
                        form.render('checkbox');
                    }
                    i++;
                });
                i = 0;
                $(".layui-table-fixed.layui-table-fixed-l").find(".layui-table-body").find("input[name='layTableCheckbox']").each(function() {
                    if (arr.indexOf(res.data[i].id) != -1) { //关键点如果当前行数据中score包含57那么就不可选
                        $(this).attr("disabled", 'disabled').removeAttr("checked");
                        form.render('checkbox');
                    }
                    i++;
                });
            }
        });
        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj) {
            console.log(obj)
        });
        $("#getselect").click(function() {
            var checkStatus = table.checkStatus('idTest'); //test即为基础参数id对应的值
            layer.alert(JSON.stringify(checkStatus.data));
        });
    });
</script>

最后效果

网上例子很少，所以记录一下

数据库

文章转载自小码哥，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

layui 数据表单根据返回的数据判断是否显示checkbox

评论