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

我会带着你远行 2023-01-18 02:20 432阅读 0赞

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

单选已启用的会失败

![2021043010395956.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4MTk4MTgx_size_16_color_FFFFFF_t_70][]

目前解决的办法 ：

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4MTk4MTgx_size_16_color_FFFFFF_t_70 1][]

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

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

所以我做了如下逻辑：

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

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

//监听勾选
                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;
                    }

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

![20210430104457417.png][]

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

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

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

![202104301047567.png][]

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

![20210430104650796.png][]

这时显示的内容就是

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4MTk4MTgx_size_16_color_FFFFFF_t_70][]

和

![2021043010395956.png][]

如果要进行删除操作。

也是设置了一个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);
                                    }
                                }
    }

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

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

[2021043010395956.png]: /images/20221021/92afd645c13d493ea940eac1e8cb9274.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4MTk4MTgx_size_16_color_FFFFFF_t_70]: /images/20221021/1f328acb152c408cabe9ec5db92e38aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4MTk4MTgx_size_16_color_FFFFFF_t_70 1]: /images/20221021/1e5f51fa02ea4f83871b01eb71448ff7.png
[20210430104457417.png]: /images/20221021/1a9e0d58f51b4460a182d6646714c400.png
[202104301047567.png]: /images/20221021/00c4701c33814210a41240828f235e4c.png
[20210430104650796.png]: /images/20221021/2f3aaf190807401e9ae31587be9921ba.png