layui-table中勾选框部分勾选的暂时解决办法

layui-通过table进行状态勾选，但是在表格中有部分是启动的状态，启动状态下不能够被勾选。如下：

单选已启用的会失败

全选的会把已启用的勾选关闭

 

目前解决的办法 ：

在layui的工具 对勾选框进行监听

table.on('checkbox(qnyTable)', function (obj) {
...............
}

在官方文档上目前只有这几种方式。

如果要实现的话还需要自行去控制

所以我做了如下逻辑：

首先判定是勾选是单次单选还是单次全选，如果是单次单选 ，选择的对象里数据对象某一个条件是否为真，比如我是判断是否启用，如果是，那么不能进行勾选，

如果是单次全选，回去循环，循环获得的数据中如果有满足启用条件的，那么会取消掉勾选状态。
 

 //监听勾选
            table.on('checkbox(qnyTable)', function (obj) {
                if (obj.type == 'one') {
                    if (obj.data.isUsed == 1 && obj.checked) {
                        layer.msg('该空间启用！不能勾选以及其他操作！', {icon: 2});
                        $(this).prop("checked", false).next().removeClass("layui-form-checked");
                        layui.form.render();
                        return;
                    }
                } else if (obj.type == 'all') {
                    var checkStatus = table.checkStatus('qnyTable');
                    var resultStatus = [];
                    for (var i = 0; i < checkStatus.data.length; i++) {
                        var checkObj = checkStatus.data[i];
                        if (checkObj.isUsed == 1) {
                            layer.msg('有空间启用！不能全选', {icon: 2});
                            //目前无法做到勾选为启用的
                            //$("input[type='checkbox'][name='layTableCheckbox']").prop('checked', false);
                            $('tr[data-index=' + i + ']').find("input[type = 'checkbox'][name='layTableCheckbox']").each(function () {
                                $(this).prop("checked", false).next().removeClass("layui-form-checked");
                            });
                            //如何把checkStatus 某一条数据删除
                        }
                    }
                    return;
                }

需要注意的是在全选的状态下，不能直接通过这个方法

因为这里的this是指单次单选框这个对象，（应该是，欢迎指正，不是做前端的，只是猜测）

需要去找到数据对应的对象。

在浏览器F12中，表格会这样展示

所以现在会找到对应的对象然后再禁用。（这块就是直接参考百度其他大佬说的），但是我还不知道如何把实际选择起来的数据进行移除。

这时显示的内容就是

和

如果要进行删除操作。

也是设置了一个toolbar 进行监听

  //头工具栏事件
            table.on('toolbar(qnyTable)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case'deleteCheck':
                        console.log(JSON.stringify(checkStatus))
                        layer.confirm('需要删除这些内容?', {btn: ['确定', '取消']}, function () {
                            if (checkStatus.data.num <= 0) {
                                layer.msg('选择项为空!', {icon: 2});
                                return;
                            }
                            var resultCheck = [];
                            for (var i = 0; i < checkStatus.data.length; i++) {
                                var checkObj = checkStatus.data[i];
                                if (checkObj.isUsed == 0) {
                                    resultCheck.push(checkObj);
                                }
                            }
}

这里的话选择的内容其实还是全选了，目前暂时的解决办法是重新创建一个数组，然后把不满足启用条件的数据放入，再进行前后端的操作。

目前暂时解决办法也只能想到这里了，不是专门做前端的 可能方法欠妥。

 

 

标签：obj,layui,勾选,全选,checkStatus,table,勾选框
来源： https://blog.csdn.net/qq_28198181/article/details/116293258