layui动态表格监听单选框单击事件

layUI的动态表格插件,指定当前列是单选框,那么如何获得单击事件并拿到当前行数据呢?
话不多说,上码!

// 框架初始化
$(function(){
        layui.use(['table','laydate','layer'], function() {
            var table = layui.table;
            var laydate = layui.laydate;
            var layer = layui.layer;
            table.init('my_table_1', {
                        //表格初始化参数
                        height: document.body.clientHeight-55,   //动态高度
                        cellMinWidth: 100,   //最小宽度
                        skin: "nob",      //表格风格 line row nob
                        even: true,        //是否隔行变色
                        limit: 10000,
                        done: function(res, curr, count) {
                            // 监听单选单击事件,其中my_table_1是table的lay-filter的属性值
                            table.on('row(my_table_1)',function(obj){    
                            	// 其中,obj是单选后当前行的数据
                                window.parent.document.getElementById("contents").contentWindow.reSeGYS(obj.data.ck2, obj.data.ck3);
                                window.parent.closeWinSelect();
                            });
                        }
                    });
        });
});
layui 动态表格中,由于表格数据是异步加载的,因此需要在数据加载完成后,才能监听复选框的选中事件,实现单选功能。具体实现步骤如下: 1. 在页面中定义数据表格,并设置其复选框列的 lay-skin 属性为 primary,表示使用原始风格的复选框。同时,设置表格的 lay-filter 属性为 demo,用于后续的事件监听。 ```html <table class="layui-table" lay-filter="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> </tbody> </table> ``` 2. 在 JavaScript 代码中,定义数据接口,并使用 layuitable 模块进行数据表格的初始化。在数据加载完成后,监听表格的复选框选中事件,并在事件处理函数中,根据选中状态来判断是否需要取消其他行的选中状态。 ```javascript layui.use(['table', 'jquery'], function(){ var table = layui.table; var $ = layui.jquery; // 定义数据接口 var dataUrl = '/getData'; // 初始化数据表格 table.render({ elem: '#demo', url: dataUrl, cols: [[ {type:'checkbox', lay-skin:'primary'}, {field:'id', title:'ID'}, {field:'name', title:'姓名'}, {field:'gender', title:'性别'}, {field:'city', title:'城市'} ]], done: function(res, curr, count) { // 监听表格复选框选择 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; } } } }); } }); }); ``` 在上述代码中,我们首先定义数据接口,然后使用 layuitable 模块进行数据表格的初始化。在数据加载完成后,使用 done 回调函数监听表格的复选框选中事件,并在事件处理函数中,根据选中状态来判断是否需要取消其他行的选中状态。这样,就可以实现动态表格复选框的单选功能了。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值