layui数据表格复选框设置选中

$.each(res.data, function (i, obj) {
    for(var j=0; j < chosenData.length ; j++){
        if (obj.id == chosenData[j].id) {
            //$("input[type='checkbox'][name='layTableCheckbox']").prop('checked', true);
            $('tr[data-index=' + obj.LAY_TABLE_INDEX + '] input[type="checkbox"]')
                .next().addClass("layui-form-checked");
        }
    }
});
layui数据表格中,可以通过监听复选框选中事件,来实现单选功能。具体实现步骤如下: 1. 在页面中定义数据表格,并设置复选框列的lay-skin属性为primary,表示使用原始风格的复选框。 ```html <table class="layui-table" id="demo"> <thead> <tr> <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th> <th>ID</th> <th>姓名</th> <th>性别</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="" lay-skin="primary"></td> <td>1</td> <td>小明</td> <td>男</td> <td>北京</td> </tr> <tr> <td><input type="checkbox" name="" lay-skin="primary"></td> <td>2</td> <td>小红</td> <td>女</td> <td>上海</td> </tr> <!-- ... --> </tbody> </table> ``` 2. 在JavaScript代码中,监听表格复选框选中事件,并在事件处理函数中,根据选中状态来判断是否需要取消其他行的选中状态。 ```javascript layui.use('table', function(){ var table = layui.table; //监听表格复选框选择 table.on('checkbox(demo)', function(obj){ var checkStatus = table.checkStatus('demo'); var data = checkStatus.data; var isChecked = obj.checked; var rowIndex = obj.data.LAY_TABLE_INDEX; if (isChecked) { // 如果选中,则取消其他行的选中状态 for (var i = 0; i < data.length; i++) { if (data[i].LAY_TABLE_INDEX != rowIndex) { table.checkStatus('demo').data[i].LAY_CHECKED = false; } } } }); }); ``` 在上述代码中,我们首先获取当前表格选中状态,然后获取当前选中的行的索引值,接着判断是否为选中状态,如果是,则遍历所有行,将除当前选中行之外的其他行的选中状态取消。这样,就可以实现单选功能了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值