支持动态添加列，多行Title的bootstrapTable
摘要
- bootstrapTable是目前应用较多的前端Table插件，代码简洁，兼容性好，实用且功能丰富。
- 但目前的bootstrapTable依然无法满足客户近乎变态的要求。
客户需求
我们先了解一下客户的变态需求
- 三行Title
- 动态合并列
- 动态添加小标题(第三行title显示内容从数据库读取)
- 根据页面显示内容及样式原模原样导出Excel
给一张图感受一下：
开发过程
通过分析，我们需要实现以下几个点
- 合并行
- 合并列
- 从数据库动态加载行
- 数据填充
- 导出Excel
合并行
bootstrapTable支持合并行，分析Table结构，前五列需要合并两行。处理如下：【伪代码，仅供参考】
{
field: '',
align: 'center',
valign: 'middle',
width: "4%",
colspan: 1, //不合并列
rowspan: 2 //合并两行
},合并列
同样bootstrapTable支持合并列，分析Table结构，第6列【提报数据】需要进行拆分，拆分为3列，处理如下：【伪代码，仅供参考】
{
title: '提报数量',
align: 'center',
valign: 'middle',
colspan: 3, //拆分为3列
rowspan: 1 //不需要合并行
},最后一列【陈列形式】，同样需要拆分，但是拆分列数，我们无法确定，需从数据库读取，处理如下：【伪代码，仅供参考】
$.post("/DirectorApvClientSummary/GetActiveModelColumns", {}, function (data) {
var modelLen = data.length; //从数据库中读取需要拆分的列数
{
title: '陈列形式',
align: 'center',
valign: 'middle',
colspan: modelLen, //数据库中读取的拆分的列数
rowspan: 1 //无需合并行
}
})这样我们的第一行就处理完成了。按照bootstrapTable提供API文档。
第二行，我们只需按照要求，在columns参数后继续添加数组对象即可。
如：我们只需申明数组对象，将列Push进数组，然后在push至bootstrapTable的columns对象即可。
var columnsDetail = [];
columnsDetail.push({
field: 'fridgeSuggestNum',
width: "10%",
title: '冰箱陈列',
align: 'left',
valign: 'middle'
});
columnsDetail.push({
field: 'automationSuggestNum',
width: "10%",
title: '生动化陈列',
align: 'left',
valign: 'middle',
});
columnsDetail.push({
field: 'totalSuggestNum',
width: "10%",
title: '小计',
align: 'left',
valign: 'middle',
});
columns.push(columnsDetail);columns对象组装完成之后，我们只需初始化bootstrapTable即可完成。
$(self._active_list).bootstrapTable({
url: '/DirectorApvClientSummary/GetPageData',
method: 'get',
striped: true,
cache: false,
pagination: true, //采用前端分页，是为了使用bootstrapTable的导出功能，且保持格式
sortable: false,
sortOrder: "asc",
queryParamsType: "limit",
undefinedText: "",
contentType: 'application/json,charset=utf-8',
queryParams: function (params) {
self._pageIndex = params.offset;
self._pageSize = params.limit;
return self._search_data(self);
},
showFooter: true,
sidePagination: "server",
strictSearch: true,
clickToSelect: true,
cardView: false,
detailView: false,
showColumns: true,
showToggle: true,
pageList: SoingolSoftCommon.getPageSizes(),
selectItemName: "clientActiveId",
singleSelect: true,
pageNumber: 1,
pageSize: 15,
scrollX: true,
columns: columns, //我们刚刚组装的Columns数组
// 单元格单击事件
onClickCell: function (field, value, data, element) {
}
});数据填充
数据填充，均通过formatter函数完成，为了更好的贴近业务，修改了bootstrapTable底层，代码
原来的列formatter函数中，有三个参数，分别为：value，row，index；但这显然是不够的，由于列是动态添加，我们需要知道当前列的file值，故对formatter进行扩展，分别为：value, row, index, filed。
我们需要根据filed值判断填充的值是什么。
var arrSuggestActiveModel = row.arrSuggestActiveModel;
if (arrSuggestActiveModel) {
for (var j = 0, len = arrSuggestActiveModel.length; j < len; j++) {
if ($.trim(arrSuggestActiveModel[j].activeintModel) == $.trim(filed)) {
return arrSuggestActiveModel[j].activeintNum;
}
}
}导出Excel
前文提过，为了保持导出格式，我们需充分利用bootstrapTable的导出功能，做了前端分页。
如何导出，我们只需在bootstrapTable中增加如下配置：
showExport: true, //是否显示导出
exportDataType: "all",
exportTypes: ['excel', 'xlsx'],
exportOptions: {
//ignoreColumn: [0,0], //忽略某一列的索引
fileName: '陈列奖励提报数据', //文件名称设置
worksheetName: 'Sheet1', //表格工作区名称
tableName: '陈列奖励提报数据',
excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
//onMsoNumberFormat: DoOnMsoNumberFormat
},这样，适合我们的bootstrapTable就算完成。我在下文会贴出完整代码，以供大家参考，后附上修改后的bootstrapTable.js下载链接。
完整代码
//初始化页面中Table
_initTable: function (self) {
var columns = [];
//获得陈列形式的列
$.post("/MinisterApvPhotoActiveExport/GetActiveModelColumns", {}, function (data) {
var modelLen = data.length;
columns.push([
{
field: 'agentName',
title: '业代/部门',
width: "10%",
align: 'left',
valign: 'middle',
colspan: 1,
rowspan: 2
},
{
field: 'clientCode',
width: "10%",
title: '客户编码',
align: 'left',
valign: 'middle',
colspan: 1,
rowspan: 2
}, {
field: 'clientName',
width: "10%",
title: '店名',
align: 'left',
valign: 'middle',
colspan: 1,
rowspan: 2
},
{
field: 'contacts',
width: "10%",
title: '联系人',
align: 'left',
valign: 'middle',
colspan: 1,
rowspan: 2
},
{
field: 'telPhone',
width: "10%",
title: '电话',
align: 'left',
valign: 'middle',
colspan: 1,
rowspan: 2
},
{
field: 'clientShape',
width: "10%",
title: '客户形态',
align: 'left',
valign: 'middle',
colspan: 1,
rowspan: 2
},
{
field: 'address',
width: "10%",
title: '地址',
align: 'left',
valign: 'middle',
colspan: 1,
rowspan: 2
},
{
field: 'parentClientCode',
width: "10%",
title: '经销商客编',
align: 'left',
valign: 'middle',
colspan: 1,
rowspan: 2
},
{
field: 'parentClientName',
width: "10%",
title: '经销商',
align: 'left',
valign: 'middle',
colspan: 1,
rowspan: 2
},
{
title: '提报数量',
align: 'center',
valign: 'middle',
colspan: 3,
rowspan: 1
},
{
title: '陈列形式',
align: 'center',
valign: 'middle',
colspan: modelLen,
rowspan: 1
}
]);
var columnsDetail = [];
columnsDetail.push({
field: 'fridgePrizeCount',
width: "10%",
title: '冰箱陈列',
align: 'left',
valign: 'middle'
});
columnsDetail.push({
field: 'vividnessPrizeCount',
width: "10%",
title: '生动化陈列',
align: 'left',
valign: 'middle'
});
columnsDetail.push({
field: 'totalPrizeCount',
width: "10%",
title: '小计',
align: 'left',
valign: 'middle'
});
for (var i = 0; i < modelLen; i++) {
columnsDetail.push({
field: data[i],
width: "10%",
title: data[i],
align: 'left',
valign: 'middle',
formatter: function (value, row, index, filed) {
var arrSuggestActivePrize = row.arrSuggestActivePrize;
if (arrSuggestActivePrize) {
for (var j = 0, len = arrSuggestActivePrize.length; j < len; j++) {
if ($.trim(arrSuggestActivePrize[j].activeintModel) == $.trim(filed)) {
return arrSuggestActivePrize[j].activeintNum;
}
}
}
}
})
}
columns.push(columnsDetail)
//初始化Table
if (self._renderListObj) {
var opt = {
url: "/MinisterApvPhotoActiveExport/GetExportData",
silent: true,
query: self._search_data(self)
};
$(self._active_list).bootstrapTable("refresh", opt);
return;
}
self._renderListObj = $(self._active_list).bootstrapTable({
url: '/MinisterApvPhotoActiveExport/GetExportData',
method: 'get',
striped: true,
cache: false,
pagination: true,
sortable: false,
sortOrder: "asc",
undefinedText: "",
queryParamsType: "limit",
contentType: 'application/json,charset=utf-8',
queryParams: function (params) {
self._pageIndex = params.offset;
self._pageSize = params.limit;
return self._search_data(self);
},
undefinedText: "",
showFooter: false,
sidePagination: "client",
strictSearch: true,
clickToSelect: true,
height: SoingolSoftCommon.getAdminTableHeight(),
uniqueId: "clientActiveId",
cardView: false,
detailView: false,
showColumns: true,
showToggle: true,
pageList: SoingolSoftCommon.getPageSizes(),
selectItemName: "clientActiveId",
singleSelect: true,
scrollX: true,
columns: columns,
pageNumber: 1,
pageSize: 15,
showExport: true, //是否显示导出
exportDataType: "all",
exportTypes: ['excel', 'xlsx'],
exportOptions: {
//ignoreColumn: [0,0], //忽略某一列的索引
fileName: '陈列奖励提报数据', //文件名称设置
worksheetName: 'Sheet1', //表格工作区名称
tableName: '陈列奖励提报数据',
excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
//onMsoNumberFormat: DoOnMsoNumberFormat
},
// 单元格单击事件
onClickCell: function (field, value, data, element) {
}
});
}, "json");
}bootstrap_table.js下载地址：
修改后的bootstrap_table下载地址。