本文共 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/