Layui中数据表格复选框头部全选框改变成文字

13 篇文章 4 订阅
4 篇文章 0 订阅

拿到需求要把Layui数据表格的复选框最上面的全选框改成文字"选择"(不需要全选功能) :

 


JS代码段:

           table.render({

            elem: '#test'
            // ,url:''
            , cellMinWidth: 60 //全局定义常规单元格的最小宽度
            , width: 1000
            , skin: 'line'
            , limit: 24
            , height: 450
            , cols: [[
                { field: 'seat', width: 200, title: '座位号' }
                , { field: 'state', title: '状态', width: 200, minWidth: 90 } //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增*/
                , { type: 'checkbox', width: 100, templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>' }

            ]]
            , data: list
        });

直接用DOM强改样式:

,done:function (){
     $(".layui-table-header .laytable-cell-checkbox").html("选择");
}

完整JS代码:

table.render({

            elem: '#test'
            // ,url:''
            , cellMinWidth: 60 //全局定义常规单元格的最小宽度
            , width: 1000
            , skin: 'line'
            , limit: 24
            , height: 450
            , cols: [[
                { field: 'seat', width: 200, title: '座位号' }
                , { field: 'state', title: '状态', width: 200, minWidth: 90 } //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增*/
                , { type: 'checkbox', width: 100, templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>' }

            ]]
            , data: list
                 ,done:function (){
                $(".layui-table-header .laytable-cell-checkbox").html("选择");
            }
        });

最终实现了需要的效果:

 

tips:"这样操作dom 页面上难道看不出复选框从显示到消失的过程?总有个一闪而过的画面吧,毕竟 done 回调是在表格数据渲染完成之后朋友建议我用templet返回复选框,这个方法我没太听得懂所以我没用,Layui的文档里也有讲到关于templet的自定义列模板,但是我不是很理解,如果有朋友愿意跟我细讲一下麻烦在评论留个言,感谢!

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Beannnnnnn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值