2022年10月25日

layui 表格table render实现复选框全选(亲测可用)


layui在后台的开发中还是经常个用到的,这是切图网的前端外包切图项目需要用到的,要实现layui table render实现复选框全选,当然layui已经提供了非常完善的文档,只需要阅读文档并且写上一些代码即可,不过这次才用了更简单的方法,在网上找现成的代码方案,可惜大多代码都是转载 并没有经过测试查证,所以能用的不多,下面附代码 亲测可用:

//转换静态表格
//本地演示
var localtable = table2.render({
elem: ‘#localtable’,
page: true,
autoSort: true,
initSort: {
field: ‘num’, //排序字段,对应 cols 设定的各字段名
type: ‘asc’ //排序方式 asc: 升序、desc: 降序、null: 默认排序
},
url: ‘layuiadmin/modules/tableFilter/json/list.json’,
cols: [[
{
field: “ids”, title: ‘<input type=”checkbox” id=”idsall” lay-skin=”primary”>’, width: 60, templet: function (d) {

return ‘<input type=”checkbox” name=”ids” value=”” lay-skin=”primary” >’;
}
},

{ field: ‘num’, title: ‘收藏’, width: 60, templet: addfav },
{ field: ‘state’, title: ‘项目编号’, templet: addlink, sort: true },
{ field: ‘id’, title: ‘项目名称’, sort: true },
{ field: ‘date’, title: ‘报名时间’, sort: true },
{ field: ‘username’, title: ‘组别’, sort: true },
{ field: ‘sex’, title: ‘阶段’, sort: true },
{ field: ‘jf’, title: ‘赛道’, totalRow: true, sort: true },
{ field: ‘class’, title: ‘申报人’, sort: true },
{ title: ‘操作’, minWidth: 150, templet: ‘#recordListBar’, fixed: “right”, align: “center” }
]],
done: function (res, curr, count) {
localtableFilterIns.reload()
}
});

$(‘.laytable-cell-1-0-0’).on(‘click’,”.layui-form-checkbox”,function(){
var classname=$(this).attr(‘class’);
$(“input[name=ids]”).each(function() {
(classname.indexOf(“layui-form-checked”) != -1)?$(this).attr(‘checked’,”):$(this).removeAttr(‘checked’);
(classname.indexOf(“layui-form-checked”) != -1)?$(this).next().addClass(‘layui-form-checked’):$(this).next().removeClass(‘layui-form-checked’);
});
});
$(‘.laytable-cell-1-0-1’).on(‘click’,”.layui-form-checkbox”,function(){
var classname=$(this).attr(‘class’);
$(“input[name=is_tj]”).each(function() {
(classname.indexOf(“layui-form-checked”) != -1)?$(this).attr(‘checked’,”):$(this).removeAttr(‘checked’);
(classname.indexOf(“layui-form-checked”) != -1)?$(this).next().addClass(‘layui-form-checked’):$(this).next().removeClass(‘layui-form-checked’);
});
});

标签:

微信扫一扫二维码访问


16年前端经验
加微信好友直接沟通
了解《我的十年》