layui 表格点击行实现CheckBox的选中与取消

Dear 丶 2023-02-20 07:19 18阅读 0赞

## layui 表格点击行实现CheckBox的选中与取消 ##

1、先引入layui相关的插件

2、在定义表格的地方 设置 lay-filter 属性

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");
                    }
                });
        });

效果图：  
![在这里插入图片描述][20200624162620268.gif]

[20200624162620268.gif]: https://img-blog.csdnimg.cn/20200624162620268.gif