BootsSrap-Table合并行

//主表
function myTable() {
var baseConfig = {
uniqueId: "" //指定主键列
, toolbar: "#tableToolbar" //一个jQuery 选择器，指明自定义的toolbar 例如:#toolbar, .toolbar.
, sortName: "" //默认排序列
, sortOrder: "desc"
, queryParams: GetTabQueryParams
, pagination: true //显示分页
, sidePagination: 'server' //设置在哪里进行分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置 服务器数据地址（url）或者重写ajax方法
, pageNumber: 1
, pageSize: 20
, url: "/PhysicalInventory/PhysicalInventoryQuery/QueryPhysicalInventory"
, pageList: [20, 30, 50] //设置为 All 或者 Unlimited，则显示所有记录。
, columns: [//配置显示列
{
field: "CommodityName", title: "商品名称", width: 180, formatter: function (val, row, index) {
return `<a href='javascript: void (0); ' onclick='OpenDetial(${row.CommodityID});'>${val}</a>`;
}
},
{ field: "BarCode", title: "商品条码", width: 170, sortable: false },
{ field: "CommodityCode", title: "商品编码", width: 170, sortable: false },
{ field: "Stand", title: "商品规格", width: 80, sortable: false },
{ field: "ResourceName", title: "项目", width: 170, sortable: false },
{ field: "OwnerName", title: "货主", width: 170, sortable: false },
{ field: "OrganizationName", title: "仓库组织", width: 120, sortable: false },
{ field: "PhysicalWarehouseName", title: "仓库", width: 170, sortable: false },
{
field: "StockType", title: "库存类型", width: 70, formatter: function (val, row, index) {
switch (val) {
case 1:
return "良品";
case 2:
return "次品";
case 3:
return "废品";
}
}
},
//{ field: "MemberName", title: "会员", width: 170, sortable: false },
//{ field: "FactAmount", title: "实际库存", width: 170, sortable: false },
{
field: "FactAmount", title: "实际库存", width: 90, sortable: false, formatter: function (val, row, index) {
return val == 0 ? `<span style="color:red;">${val}</span>` : val;
}
},
{ field: "OperateAmount", title: "可销售库存", width: 100, sortable: false },
{
field: "HoldAmount", title: "占用库存", width: 90, formatter: function (val, row, index) {
return val > 0 ? `<a href='javascript: void (0); ' onclick='ViewDetail(${row.CommodityID},${row.PhysicalWarehouseID},${row.StockType});event.stopPropagation();'>${val}</a>` : `<span style="color:red;">${val}</span>`;
}
},
{ field: "LockAmount", title: "锁定库存", width: 90, sortable: false },
}

],
onl oadSuccess: function () {//当所有数据被加载时触发处理函数
var data = $('#myTable').bootstrapTable('getData', true);
mergeCells1(data, 'CommodityName', 1, $('#myTable'), ["CommodityID"]);
mergeCells1(data, 'CommodityCode', 1, $('#myTable'), ["CommodityID"]);
mergeCells1(data, 'BarCode', 1, $('#myTable'), ["CommodityID"]);
mergeCells1(data, 'Stand', 1, $('#myTable'), ["CommodityID"]);
mergeCells1(data, 'ResourceName', 1, $('#myTable'), ["CommodityID"]);
mergeCells1(data, 'OwnerName', 1, $('#myTable'), ["CommodityID"]);
mergeCells1(data, 'OrganizationName', 1, $('#myTable'), ["CommodityID"]);
mergeCells1(data, 'PhysicalWarehouseName', 1, $('#myTable'), ["CommodityID"]);
},
onPageChange: function () {//当页面更改页码或页面大小时触发
var data = $('#myTable').bootstrapTable('getData', true);
mergeCells1(data, 'CommodityName', 1, $('#myTable'), ["CommodityID"]);
mergeCells1(data, 'CommodityCode', 1, $('#myTable'), ["CommodityID"]);
mergeCells1(data, 'BarCode', 1, $('#myTable'), ["CommodityID"]);
mergeCells1(data, 'Stand', 1, $('#myTable'), ["CommodityID"]);
mergeCells1(data, 'ResourceName', 1, $('#myTable'), ["CommodityID"]);
mergeCells1(data, 'OwnerName', 1, $('#myTable'), ["CommodityID"]);
mergeCells1(data, 'OrganizationName', 1, $('#myTable'), ["CommodityID"]);
mergeCells1(data, 'PhysicalWarehouseName', 1, $('#myTable'), ["CommodityID"]);
},
search: false,
singleSelect: true

};

var _tabConfig = $.myFunc.GetTabDefaultConfig(baseConfig);
$("#myTable").bootstrapTable(_tabConfig);
}

/**
* 合并行
* @param data 原始数据（应在服务端完成排序）
* @param fieldName 合并属性名称数组
* @param colspan 列数
* @param target 目标表格对象
* @param upperLevelFieldname 该字段上一级的字段集合（合并格数不能超过上一字段）
*/
function mergeCells1(data, fieldName, colspan, target, upperLevelFieldnameList) {
if (data.length == 0) {
return;
}
//初始化upperFieldValueList
var upperFieldValueList = [];
upperLevelFieldnameList.forEach(function (item) {
upperFieldValueList.push(data[0][item]);
})
data.push({ "GDSTITLE": "", "NAME2": "", "NAME1": "", "CATALOGNAME": "" });//主要是给数据增加一行解决底部合并问题
var numArr = [];
var value = data[0][fieldName];
var num = 0;
for (var i = 0; i < data.length; i++) {
if ((value != data[i][fieldName]) | doCheck(data[i], upperLevelFieldnameList)) {
numArr.push(num);
value = data[i][fieldName];
num = 1;
continue;
}
num++;
}
var merIndex = 0;
for (var i = 0; i < numArr.length; i++) {
$(target).bootstrapTable('mergeCells', { index: merIndex, field: fieldName, colspan: colspan, rowspan: numArr[i] })
merIndex += numArr[i];
}

//用于检查是否相同，相同返回false不相同更新父类并返回true
function doCheck(item, upperLevelFieldnameList) {
var log = false;
upperLevelFieldnameList.forEach(function (value, index) {
if (upperFieldValueList[index] != item[value]) {
log = true;
upperFieldValueList[index] = item[value]
};
})
return log;
}
}

效果：