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