在layui的表格的checkbox禁止选中某一行及全选时禁止选中

分享 未结 4 910
放慢心跳
放慢心跳 2019-7-21
悬赏:20飞吻
在layui的表格的checkbox中全选没有提供禁用某一列,即使你禁用了,全选的时候还是会选中其中禁用按钮,我是利用模板及监听checkbox写的,如下

代码如下:

    {
field: 'checkboxM',
title: '<input type="checkbox" name="lockAll" lay-filter="lockDemo" title="" lay-skin="primary">',
align: 'center',
width: 60,
templet: "#checkboxTemplet"
}
1请注意:这个表格不能固定表头,固定表头会生成多个table,不好找对应的table;我将表格的一列设置成checkbox的格式,并且设置了过滤器;
2.这个时候需要模板去渲染你需要禁用的那一列;



代码如下:
<script type="text/html" id="checkboxTemplet">
{{# if(d.appealStatus=="待本级判责"){ }}
{{# if(d.appealType=="有收寄信息"){ }}
<input type="checkbox" name="lock" lay-filter="lockDemo" data-id={{d.id}} lay-skin="primary">
{{# }else{ }}
<input type="checkbox" lay-skin="primary" disabled>
{{# }}}
{{# }else{ }}
<input type="checkbox" lay-skin="primary" disabled>
{{# } }}
</script>
3.能够让checkbox选中的我都设置了过滤器,这个时候name值要和表头不一样,表头是全选的功能,而每一列是单独选择的过程.


4.然后就是全选,取消全选及所有对应的checkbox选择后选中全选,取消其中任何一个checked的状态就取消全选状态;


代码如下:
 form.on('checkbox(lockDemo)', function (obj) {
/*此时为全选*/
if (this.name == "lockAll" && obj.elem.checked == true) {
$(".layui-table-body.layui-table-main").find("input[name='lock']").each(function () {
$(this).prop("checked", true);
form.render('checkbox');
})
/*此时为取消全选*/
} else if (this.name == "lockAll" && obj.elem.checked == false) {
$(".layui-table-body.layui-table-main").find("input[name='lock']").each(function () {
$(this).prop("checked", false);// true设为选中 false设为取消
form.render('checkbox');
})
} else if (this.name == "lock" && obj.elem.checked == false) {
var nextDiv = $(".layui-table-header").find("input[name='lockAll']").next();
$(nextDiv).removeClass("layui-form-checked");
} else if (this.name == "lock" && obj.elem.checked == true) {
var checkedAll = true;
$(".layui-table-body.layui-table-main").find("input[name='lock']").each(function () {
var checkEdThis = $(this).next().hasClass("layui-form-checked");
if (!checkEdThis) {
checkedAll = false;
}
});
if (checkedAll) {
var nextDiv = $(".layui-table-header").find("input[name='lockAll']").next();
$(nextDiv).addClass("layui-form-checked");
}

}
});
5.最后就是分页的时候如果选择了全选需要将全选按钮取消选中状态.


代码如下:
, done: function (res, curr, count) {

var nextDiv = $(".layui-table-header").find("input[name='lockAll']").next();
$(nextDiv).removeClass("layui-form-checked");
that.indexPage = curr;
that.thisTableData = res.data;
}
回帖
  • @Lucky615
    就是这样,因为现在这一列没有能够选择的权限,所以即使全选了,也不会有选中的状态的
    1 回复
  • @Lucky615 这个每一列都是禁止选中的状态,截图截不到禁用的标志
    1 回复
  • Lucky615
    2019-7-25
    有图吗[嘻嘻]
    0 回复
  • 选中后如何获取被选中行的data值呢?
    0 回复