lay数据表格(table)的多选框限制单选

news2024/9/24 13:15:50

@TOC

lay数据表格(table)的多选框限制单选

使用layui弹窗显示表格数据提供选择，最初使用单选框，选中后无法取消勾选，后该成多选框限制成单选，可点击已勾选复选框实现取消功能。
PS：easyui数据表格提供简单实现多选框限制单选的功能

lay table radio未提供取消勾选功能

业务需要，只能选中数据表格中一条数据，最开始使用table中的radio实现

//弹窗显示
var oldUserIndex = admin.open({
                type: 1,
                area: ['700px'],
                title: '确定是否调整旧人员',
                url: ctx + '/human/userDept/chooseOldUser',
                success: function (vLayer, dIndex) {
                    layer.full(oldUserIndex)//弹窗最大化
                    /* 渲染直接上级表格 */
                    var oldUserTb = table.render({
                        elem: '#oldUser',
                        where: {name: addUser.name, state: '旧'},
                        page: {curr: 1},
                        url: ctx + '/hm/user/pageList',
                        height: 'full-230',
                        cols: [[
                            {type: 'numbers', fixed: 'left'},
                            // {type: 'radio', fixed: 'left'},//radio方式，后无法实现取消勾选功能
                            {type: 'checkbox', fixed: 'left'},//改走多选，前端框架支持取消勾选

layui table checkbox 复选框限制单选

最开始实现，看layui中文文档使用table 的回调函数 done中监听复选框，尝试未成功，改外置方法监听复选框成功。
在这里插入图片描述

// 表单事件监听---复选框限制单选--选中节点外的其他勾选节点都取消勾选
                    table.on('checkbox(oldUser)', function(obj){//和表格elem
//数据表格所有勾选的多选框
                        var oldUserIds = table.checkStatus('oldUser');
                        var data = oldUserIds.data;

                        var isChecked = obj.checked;
                        //无法获取到该表格下拉框，--需要自己打印数据查看是否能获取
                        var rowIndex = obj.data.LAY_TABLE_INDEX;
                        // console.log("监听obj:" + JSON.stringify(obj)); //当前行的一些常用操作集合
                        // // console.log(data.checked); //当前是否选中状态
                        // // console.log(data.data); //选中行的相关数据
                        // console.log("isChecked:" + isChecked); // 得到radio原始DOM对象
                        // console.log("当前下标rowIndex:" + rowIndex); // 得到radio原始DOM对象
                        // console.log("所有选中data:" + JSON.stringify(data)); // 得到radio原始DOM对象
                        // // console.log("value55:" + data.value); // 被选中的值
                        // console.log("obj,se:" + JSON.stringify(obj.tr.selector)); // 得到radio原始DOM对象
                        //根据打印选中数据获取其表格下标--正则
                        var selecor = JSON.stringify(obj.tr.selector);
                        var regexp = /\d+/g;
                        var s1 = regexp.exec(selecor);
                        // console.log("s1:" + s1[0]);
                        var regexp = /\d+/g;
                        var s1 = regexp.exec(selecor);
                        if(isChecked) {
                        //以下是测试成功的实现取消其他勾选节点的渲染--上面注释的一堆都未测试通过，但百度的其他博主成功。
                            $('input[type="checkbox"]').prop('checked', false);
                            $('tr[data-index=' + s1[0] + '] input[type="checkbox"]').prop('checked', true);
                            form.render('checkbox');//重新渲染多选框很重要，之前测试是渲染全表格都无效
                        }
                    });