layui动态加载表格列

最新推荐文章于 2024-07-22 17:54:08 发布

埋头造车轮

最新推荐文章于 2024-07-22 17:54:08 发布

阅读量2.8k

点赞数 2

文章标签： html5 layui

本文链接：https://blog.csdn.net/aadyf/article/details/117704700

版权

该博客主要介绍了一段JavaScript代码，用于从接口获取数据并动态构建表格，包括行和列的动态加载。代码中，首先检查输入日期，然后调用接口获取数据。在数据处理阶段，将接口返回的`unitReservedTotal`数组作为动态列，并计算合计行的总和。同时，将合计行添加到数据数组末尾。最后，使用laytable库动态生成带有合计行的表格，突出显示合计行并调整表格样式。

摘要由CSDN通过智能技术生成

首先根据接口返回的数据拼装成动态表格加载的格式，我这里这个表格部分列数据需要动态加载，行需要动态加载，最后还有一行合计，合计行取接口字段unitReservedTota数组的total(即对所有unitReserved数组下unitReservedByDate对象中total数据的一个汇总)，l如下图

所以将unitReservedTota数组作为动态列遍历，同时将其追加到unitReserved对象最后一条，展示

function reload(){

var startdateVal = $("#startDateTime").val();

var enddateVal = $("#endDateTime").val();

if(!startdateVal){

layer.msg("请输入开始日期！");

return false;

}

if(!enddateVal){

layer.msg("请输入结束日期！");

return false;

}

indexLoading = layer.load(0, {shade: 0.1});

var entity = {};

entity.limitTypeCode = thisTypeCode;

entity.unitCode = $("#unitCode").val()?$("#unitCode").val().trim():null;

entity.startDate = $("#startDateTime").val();

entity.endDate = $("#endDateTime").val();

ajax("post", getDateListPlan, false, JSON.stringify(entity),

function (result) {

if(result.data){

$(".nodata").hide();

queryColumn = result.data.unitReservedTotal

queryData = result.data.unitReserved

for(var i=0;i<queryData.length;i++){

if(queryData[i].unitReservedByDate){

for(var j=0;j<queryData[i].unitReservedByDate.length;j++){

queryData[i][queryData[i].unitReservedByDate[j].limitRoleCode+queryData[i].unitReservedByDate[j].limitRoleResult] = queryData[i].unitReservedByDate[j].total;

}

console.log(queryData)

let obj = {};

obj.planDate = '合计：';

for(var i=0;i<queryColumn.length;i++){

obj[queryColumn[i].limitRoleCode+queryColumn[i].limitRoleResult] = queryColumn[i].total;

}

if(queryData.length > 0){

queryData.push(obj);

}

dateTableCol();

}else{