html中自动选中行,Layui中使用table组件时让某些行的checkbox自动选中

在使用layui框架时,数据表格是经常使用的一个组件,一般在表格的左侧会有checkbox可以用来勾选当前行的数据,但是checkbox一般是由用户自己手动勾选的,那遇到需要自动勾选的情况怎么办呢?

如果使用dom操作来控制checkbox选中是没有问题的,但是在使用layui的api方法时会获取不到此条被选中的数据,解决该问题的方法有两个。

修改数据方法

在表格的json数据中设置LAY_CHECKED为true,表格上的对应行的checkbox就是选中状态了。

const data = [

{ id: 1, name: '张三', LAY_CHECKED: true },

{ id: 2, name: '李四', LAY_CHECKED: false },

{ id: 3, name: '王五', LAY_CHECKED: true }

]

修改变量方法

如果返回的数据里没有LAY_CHECKED属性呢?那么我们就需要修改layui里监控checkbox选中的变量了。

layui.use('table', function() {

var $ = layui.$;

var table = layui.table;

// 修改变量

table = $.extend(table, {

config: {

checkName: 'isChecked'

}

});

// 渲染table

table.render({

...

});

});

这样一来,我们就根据json中控制checkbox选中的变量名称来修改代码就可以了。

如有错误,请多指教,谢谢!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值