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

拿到需求要把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的自定义列模板，但是我不是很理解，如果有朋友愿意跟我细讲一下麻烦在评论留个言，感谢！

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

猜你喜欢