LayUI-动态渲染数据表格的表头参数
最近在项目中遇到一个需求：根据后台数据动态渲染数据表格的数据。
- 分析：因为
LayUI数据表格的数据渲染是通过给table.render({})中的cols传值来实现的，所以实现上述需求的突破口✨就是：动态渲染cols，即 动态渲染数据表格的表头参数。
一、实现效果
二、对应代码
var currentPage = 1; // 表格当前页-默认为1
layui.use(['table','jquery'],function(){
var table = layui.table,
$ = layui.jquery;
// LayUI-动态渲染数据表格的表头参数 start
// 动态渲染表格的cols-实现数据表格的动态渲染
let cols = [];
let col = [];
$.ajax({
// 通过ajax请求获取到数据表格需要渲染的表头
type: 'POST',
url: "{:url('salaryStatisticsTitle')}", // 请求地址-里面只有表头数据
dataType: "JSON",
sync: false,
contentType: "application/json",
success: function (res) {
console.log(res) // 获取到的数据如下图1所示
// 获取到动态的cols
$.each(res.title, function (index, item) {
// $.each()遍历数组——其中index是指数组的下标，value指向对应的值
// console.log(index);
// console.log(item);
// 针对不同列展示方式不同
if(index == 'school' || index == 'position') {
col.push({
field: index, title: item, align: 'center', fixed: true, width: 130});
} else if(index == 'dement' || index == 'real_name') {
col.push({
field: index, title: item, align: 'center', fixed: true});
} else if(index == 'wages_payable') {
col.push({
field: index, align: 'center', title: item, width: 100});
} else {
col.push({
field: index, align: 'center', title: item});
}
});
cols.push(col);
// 渲染表格数据
table.render({
elem: '#test'
, height: getTableHeight() // 动态获取到表格高度，但在这儿没写这个函数，可忽略
, url: "{:url('salaryStatisticsList')}" // 请求地址-里面没有表头数据
, page: {
curr: currentPage
}
, id: 'testReload'
, cols: cols // 动态渲染cols
// 借助 parseData 回调函数将后台返的数据解析成 table 组件所规定的数据格式
, parseData: function(res){
// res 即为原始返回的数据
return {
"code": res.code, // 解析接口状态
"count": res.data.total, // 解析数据长度
"data": res.data.data, // 解析数据列表
'school': res.school,
};
}
, done:function(res, curr, count) {
console.log(res); // 获取到的是前面parseData里处理后return的数据，如下图2所示
}
});
}
});
// LayUI-动态渲染数据表格的表头参数 end
// 下面的代码与 LayUI-动态渲染数据表格的表头参数 无关，可忽略哟~
// 表格重载
function reloadTable(page){
var school = tag_school.getValue('value').toString();
var dement = tag_dement.getValue('value').toString();
var poosition = tag_position.getValue('value').toString();
var promotion = tag_promotion.getValue('value').toString();
var personnel = tag_personnel.getValue('value').toString();
var date = $('input[name="date"]').val();
var name = $("input[name='name']").val();
// 执行重载
table.reload('testReload', {
page: {
curr: page}
,height:getTableHeight()
,where: {
school,dement,position,promotion,personnel,date,name
}
,done:function(res,curr){
currentPage = curr;
}
});
}
// 点击搜索按钮
$('.demoTable .layui-btn').on('click', function(){
// 执行 表格重载
reloadTable(1);
});
// 敲击enter键
$(window).on('keyup', function (e) {
if (e.keyCode == 13) {
// 执行 表格重载
reloadTable(1);
}
})
})
三、后台传的数据（上面代码里提及的图1、图2）
图1
- 对应请求地址：
salaryStatisticsList；- 冒号左边对应代码里的
index，冒号右边对应代码里的item。
图2
- 对应请求地址：
salaryStatisticsTitle，但下图是借助parseData回调函数处理后的数据哟~；- 给
LayUI里的cols设置field后，它会根据自己的field去data里找到对应属性，然后展示其属性对应的属性值。
哒哒哒~大功告成啦
