layui数据表格的checkbox设置部分为不可选

最新推荐文章于 2024-09-19 11:13:48 发布

「已注销」

最新推荐文章于 2024-09-19 11:13:48 发布

阅读量7.4k

点赞数 3

分类专栏： layui html 文章标签： html

本文链接：https://blog.csdn.net/weixin_47367923/article/details/106583970

版权

本文介绍了在layui数据表格中如何实现部分checkbox不可选的功能，通过templet解决部分数据不显示复选框的问题，并探讨了全选功能的实现以及在使用done函数禁用过程中遇到的问题，建议重写不可选状态的样式以优化用户体验。

摘要由CSDN通过智能技术生成

问题：在layui数据表格中设置了字段为type:checkbox 但是想要实现部分不显示，不可选的功能。
layui内置没有该功能，所以只能自己实现。

使用templet实现

table.render({
   
    elem: '#junTable',
    url: '',
    cols: [[
        {
   
            templet: "#checkbd",
            title: "<input type='checkbox' name='siam_all' title='' lay-skin='primary' lay-filter='siam_all'> ",
            width: 60,
        }
        , {
   
            field: 'z_id',
            title: 'id'
        }
    ]],
    page: true,
    limit: 10
});
<script type="text/html" id="checkbd">
    {
   {
   #  if (d.can_fabu === 1){
    }}// 这里是判断要不要显示的条件
    <input type="checkbox" name="siam_one" title="" lay-skin="primary" data-id = "{
   { d.z_id }}">
    {
   {
   #  } }}
</script>
<style>
    .laytable-cell-checkbox .layui-disabled.layui-form-checked i {
   
        background: #fff !important;
    }
</style>

到这里就可以部分数据不显示复选框了，但是全选功能和获取id的功能还是不正常

全选功能

form.on("checkbox(siam_all)", function () {
   
    var status = $(this).prop("checked");
    $.each($("input[name=siam_one]"), function (i, value) {
   
        $(this).prop("checked", status);
    })