layui 表格点击行实现CheckBox的选中与取消
1、先引入layui相关的插件
2、在定义表格的地方 设置 lay-filter 属性
<table id="tableBigType" lay-filter="tableBigType" class="layui-hide"></table>
3、数据加载 (重点就在这里)
layui.use('table', function(){
table = layui.table;
table.render({
elem: '#tableBigType' //上面定义的id
,url:'' //数据的请求路径
,cols: [[
{field:'checkbox', type:'checkbox',checked:'true', width:'10%'}
,{width:'20%',type:'numbers',title: '序号', sort: true}
,{field:'dishesBigNumber', width:'20%', title: '编号', sort: true}
,{field:'dishesBigName',width:'50%', title: '酒菜大类名称'}
]]
,page: true
});
//监听行单击事件 给每一行数据绑定点击事件
//row(tableBigType) 表格的id
table.on('row(tableBigType)', function(obj){
//获取checkbox
var checked = $($($(obj.tr[0].firstChild)[0].firstElementChild)[0].lastChild);
//判断是否被选中
if(checked[0].className == "layui-unselect layui-form-checkbox layui-form-checked") {
//设置为未选中的样式
checked.attr("class","layui-unselect layui-form-checkbox");
} else {
//设置为选中的样式
checked.attr("class","layui-unselect layui-form-checkbox layui-form-checked");
}
});
});
效果图: