在做项目时,需要对layui表格进行多种操作,特别是隐藏表格表头。网上也分享了很多隐藏表头的方法,但是这些方法会将当前页面的所有表格表头都隐藏,不适合部分表格隐藏表头的情况。后来用jquery解决了部分表头 隐藏的问题。
1.不介意所有表格表头隐藏(或者说,需要把所有表格表头都隐藏)
在任意一个表格渲染的回调函数里使用:
$('th').hide()
或者,
$('th').css('dispaly','block')
示例如下:
table.render({ elem: '#tableid', url:'xxx/xxx/xxx.js', where: {time:new Date()}, limit: Number.MAX_VALUE , cols: [[ { field: 'id',align: 'center', title: '编号',hide:true}, { field: 'pra',align: 'center', title: '参数',width:150}, { field: 'val',align: 'center', title: '数值',edit:'text',width:150} ]], done: function (res, curr, count) { $('th').hide() } });
2.只隐藏部分表格的表头
同样是在回调函数里实现隐藏,但获取的内容是当前表格。
思路:右键-检查,选择表头,会发现layui进行表格渲染时,其实是写好了table-header,table-body两个div,且table-header的div class显示为非隐藏。
如下:
那么,只需要将table-header的div class 改为隐藏就可以了。
代码:
$(this.elem).next().find(".layui-table-header").attr('class',"layui-hide layui-table-header")
示例:
table.render({ elem: '#tableid', url:'xx/xxx/xxx.js', where: {time:new Date()}, limit: Number.MAX_VALUE , cols: [[ { field: 'id',align: 'center', title: '编号',hide:true}, { field: 'pra',align: 'center', title: '参数',width:150}, { field: 'val',align: 'center', title: '数值',edit:'text',width:150} ]], done: function (res, curr, count) { $(this.elem).next().find(".layui-table-header").attr('class',"layui-hide layui-table-header")//当前表格块下找到class为".layui-table-header"的元素(也就是需要隐藏的div),将其属性改为"layui-hide layui-table-header"即可实现隐藏。('layui-hide'在layui.css里已经定义好样式) } });