博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
layui-table中勾选框部分勾选的暂时解决办法
阅读量:164 次
发布时间:2019-02-28

本文共 2945 字,大约阅读时间需要 9 分钟。

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);                                }                            }}

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

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

 

 

转载地址:http://bppc.baihongyu.com/

你可能感兴趣的文章