需求:
在前台展示表格数据,但是表格的字段列值column不是固定的,每次都会变动,所以想了个办法
设置成动态的列
步骤:
1.先ajax请求后台获取要用的 field 和 title
2.创建一个初始的column
3.定义一个空的column拼接后台的传回来的field 和 title
4.把后台的数据push进初始化好的column 中
5.加载bootstrapTable
实现代码:
function getColumns() {
//1.先ajax请求后台获取要用的 field 和 title
$.ajax({
url : sendOutTable.getBrandList,//获取动态的列名数据url
type : 'post',
dataType : "json",
data : {
userId: currentUser.userId,
apply_company_id: $("#applyCompanyId").val(),
apply_store_id: $("#applyStoreId").val(),
inStatus: $("#inStatus").val(),
outStatus: $("#outStatus").val(),
supplierId: $("#supplierId").val(),
receiveTime1: $("#receiveTime1").val(),
receiveTime2: $("#receiveTime2").val()
},
async : false,
success : function(returnValue) {
//2.创建一个初始的column
mycolumn=[[
{
field: 'storename',
title: '门店',
align: 'center',
valign: 'middle',
width: '12%',
colspan: 1,
rowspan: 2,
}, {
title: '门店结款',
align: 'center',
width: '44%',
valign: 'middle',
colspan: returnValue.length +1,
rowspan: 1
}, {
title: '总部结款',
width: '44%',
align: 'center',
valign: 'middle',
colspan: returnValue.length+1,
rowspan: 1
}
]]
//3.定义一个空的拼接后台的传回来的field 和 title
ouclosdf =[]
$.each(returnValue, function(i, item) {
var fieldsss='store' + item.brandid;
ouclosdf.push({
field: fieldsss,
title: item.brandname,
align: 'center',
valign: 'middle'
})
});
ouclosdf.push({
field: 'storeAmount',
title: '合计',
align: 'center',
valign: 'middle',
})
$.each(returnValue, function(i, item) {
var prime='prime' + item.brandid;
ouclosdf.push({
field: 'prime' + item.brandid,
title: item.brandname,
align: 'center',
valign: 'middle',
})
});
ouclosdf.push({
field: 'bookAmount',
title: '合计',
align: 'center',
valign: 'middle',
})
//4.把后台的数据push进初始化好的column 中
mycolumn.push(ouclosdf)
//5.加载bootstrapTable
$('#sendOutTable').bootstrapTable({
sidePagination: 'server',
url: sendOutTable.storemonthly,
method: 'post',
queryParams: sendOutTable.queryParams,
dataType: 'json',
queryParamsType: 'limit',
pagination: true,
detailView: false,
striped: false,
showHeader: true,
showFooter: true,
trimOnSearch: true,
pageNumber: 1,
pageSize: 15,
pageList: [15, 20],
buttonsAlign: 'left',
showExport: true,
exportDataType: "basic",
export: 'glyphicon-export icon-share',
columns: mycolumn,
});
}
});
}
实现效果: