在项目中利用layui数据表格的时候遇见几次需要动态渲染表头的情况,查了些资料,总结了一下,总体都是讲数据表格渲染列的cols:[]这部分代码拿出来进行操作。
当需要对页面中表格进行切换时,对于不同表头需要根据一个切换状态值进行渲染。
var head = {
title: [
{
id: 0,
data: [
{ field: 'name', title: '姓名', width: '8%' }
,{ field: 'id', title: '编号 ', width: '10%' }
, { field: 'petitionList', title: '操作',toolbar: '#barDemo' }
]
},
{
id: 1,
data: [
{ field: 'name', title: '姓名', width: '7%' }
,{ field: 'sex', title: '性别', width: '10%' }
, { field: 'age', title: '年龄', width: '10%',templet:function(d){
return '<div style="text-align:left"></div>'
} }
, { field: 'petitionList', title: '操作',toolbar: '#barDemo1' }
]
}
]
};
//切换表头
function gethead(id) {
let result = head.title[0].data;
head.title.forEach(item => {
if (id == item.id) {
result = item.data
}
});
// console.log(result)
return result;
}
// tab标签切换
element.on('tab(test)', function (data) {
state = $(".layui-this").attr('s')
//这两句话很重要,不然表头会重复渲染
$("#mytable").empty();
$("#mytable").append('<table class="layui-hide bhtable" id="LAY_table_user" lay-filter="user" lay-size="lg"></table><div class="notip" style="position:absolute;z-index:9999;top:68%;left:50%;margin-left:-24px;color:#999">无数据</div>')
table.render({
elem: '#LAY_table_user'
,url: ''
, method: 'post'
, cols: [gethead(state)]
, id: 'testReload'
, page: true
, limit: 20 //每页默认显示的数量
, response: {
statusCode: 200 //重新规定成功的状态码为 200,table 组件默认为 0
}
, parseData: function (res) { //res 即为原始返回的数据
return {
"code": res.code, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.data.total, //解析数据长度
"data": res.data.list //解析数据列表
};
}
, done: function (res, curr, count) {
$(".layui-table-main td").css("cursor", "pointer");
}
});
})
当需要调用ajax渲染表头时,同样的原理,定义变量然后根据cols格式进行ajax渲染后插入到表格中。