方案:
第一步构建动态列
js请求动态列数据然后赋值到数组结构里面
// 标题数组
var mycolumn;
$(function() {
mycolumn = initTableColumns();
// 请求动态列
generateSafetyColumns(safetyViolationItems);
})
function initTableColumns() {
// 创建一个初始colum
var columns = [];
columns.push({
checkbox:true // 第一列显示复选框
},);
columns.push({field : 'booth',title : '展位号',
formatter : function(value, row, index) {
return value.exnum;
}
});
columns.push({
field: 'booth',
title: '参展商名称',
formatter: function (value, row, index) {
return value.companyname;
}
});
columns.push({
field : 'constructCompany',
title : '搭建商名称',
formatter : function(value) {
if (value === '' || null === value || undefined === value || 'null' === value) {
return '-';
} else {
return value;
}
}
});
columns.push({
field : 'createDate',
title : '记录日期',
formatter : function(value, row, index) {
return value.split(" ")[0];
}
})
columns.push({
field : 'recordTime',
title : '当日巡查次数',
formatter : function(value, row, index) {
return TimeEnum[value];
}
});
return columns;
}
function generateSafetyColumns(safetyViolationItems){
$.each(safetyViolationItems, function(i, item) {
mycolumn.push({
field: item.violationName,
title: item.violationName,
align: 'center',
width: 100,
formatter : function(value, row, index) {
if(null != row.safetyViolationItems[i].recordContents && undefined != row.safetyViolationItems[i].recordContents
&& '' != row.safetyViolationItems[i].recordContents){
return '<span class="glyphicon glyphicon-remove"></span>';
}else{
return '<span class="glyphicon glyphicon-ok"></span>';
}
}
})
})
}
第二步发起接口请求数据进行填充
function initData() {
$('#inspectionTable').bootstrapTable({
url : '/a/inspectionheader/listDailyInspectionData',
toolbar : '#toolbar',
uniqueId : 'id',
pagination : true,
sortOrder : "asc",
clickToSelect : false,
singleSelect : false,
checkboxHeader : true,
sidePagination : "server", // 服务端分页 server
paginationPreText : '上一页',
paginationNextText : '下一页',
pageList : [ 10, 50, 100, 200, 500 ],
queryParams : function(params) {
var returnParam = {
'offset': params.offset,
'limit': params.limit,
'booth.companyname' : $("#companyname").val(),
'booth.exnum': $("#exnum").val(),
'constructCompany': $("#constructCompany").val(),
'recordTime': $("#recordTime").val(),
'createBy': $("#userName").val(),
'recordContent': $("#recordContent").val(),
'updateDate': $('#recordDate').val(),
'violationId': $('#violation').val(),
'exhibitionId': addExpo.id
};
if(returnParam.exhibitionId===null||returnParam.exhibitionId===""){
delete returnParam.exhibitionId;
}
if(returnParam.createBy===null||returnParam.createBy===""){
delete returnParam.createBy;
}
if ( $("#recordDate").val() !== '' && $("#recordDate").val() !== null && $("#recordDate").val() !== undefined) {
let date = $("#recordDate").val();
date = date.replace('-', '/');
date = date.replace('-', '/')
returnParam.updateDate = date;
}
var returnObj = returnParam
returnObj.exhibitionName = addExpo.exhibitionName
sessionStorage.setItem("returnParam", JSON.stringify(returnObj));
return returnParam;
},
responseHandler : function(res) {
return {
"rows" : res.rows,
"total" : res.total
};
},
pageList : [ 10, 50, 100, 200, 500 ],
columns : mycolumn
});
}