问题描述：
根据数据值将单元格合并
如一级指标 二级指标
原始演示效果：
目标效果如图所示：
完整的http.post请求JS
$http.post('../hnTProF3c/List', params).success(function (data) {/*console.log(data)*/if ("" != data && data.data.length > 0) {console.log(data.data);let tempArr = []let temp = []//处理数据源data.data.map((mapItem) => {if (tempArr.length == 0) {tempArr.push({F_YJZB: mapItem.F_YJZB,F_EJZB: mapItem.F_EJZB,F_SJDF: mapItem.F_SJDF,F_XJSJDF: mapItem.F_XJSJDF,F_QZZ: mapItem.F_QZZ,v2: [mapItem]})} else {let res = tempArr.some((item) => {if (item.F_EJZB === mapItem.F_EJZB && item.F_YJZB === mapItem.F_YJZB) {item.v2.push(mapItem)return true}})if (!res) {//如果没找相同的部门添加一个新对象tempArr.push({F_YJZB: mapItem.F_YJZB,F_EJZB: mapItem.F_EJZB,F_SJDF: mapItem.F_SJDF,F_XJSJDF: mapItem.F_XJSJDF,F_QZZ: mapItem.F_QZZ,v2: [mapItem]})}}})console.log("处理二级折叠")console.log(tempArr)tempArr.map((mapItem) => {if (temp.length == 0) {temp.push({F_YJZB: mapItem.F_YJZB,itemLen: mapItem.v2.length,v1: [mapItem]})} else {let res = temp.some((item) => {if (item.F_YJZB === mapItem.F_YJZB) {item.itemLen = item.itemLen + mapItem.v2.length,item.v1.push(mapItem)return true}})if (!res) {//如果没找相同的部门添加一个新对象temp.push({F_YJZB: mapItem.F_YJZB,itemLen: mapItem.v2.length,v1: [mapItem]})}}})console.log("处理一级折叠")console.log(temp)//动态创建表格let html = "";angular.element('#j-tbody').html('');for (var i = 0; i < temp.length; i++) {let f1 = ''let f2 = ''for (var j = 0; j < temp[i].v1.length; j++) {for (var z = 0; z < temp[i].v1[j].v2.length; z++) {//一级指标let firstTd = '';if (temp[i].v1[j].v2[z].F_YJZB != f1 && temp[i].v1[j].v2[z].F_YJZB != '') {firstTd = '<td class="text-center" rowspan="'+ temp[i].itemLen +'" >'+temp[i].v1[j].v2[z].F_YJZB+'</td>';f1 = temp[i].v1[j].v2[z].F_YJZB;}else {firstTd = ''}//二级指标let secondTd = '';let scoreTd = '';if (temp[i].v1[j].v2[z].F_EJZB != f2 && temp[i].v1[j].v2[z].F_EJZB !=''){secondTd = '<td class="text-center" rowspan="'+ temp[i].v1[j].v2.length +'">'+temp[i].v1[j].v2[z].F_EJZB+'</td>';scoreTd =' <td class="text-center" rowspan="'+ temp[i].v1[j].v2.length +'">'+temp[i].v1[j].v2[z].F_SJDF+'</td>'+ ' <td class="text-center" rowspan="'+ temp[i].v1[j].v2.length +'">'+temp[i].v1[j].v2[z].F_XJSJDF+'</td>'+ ' <td class="text-center" rowspan="'+ temp[i].v1[j].v2.length +'">'+temp[i].v1[j].v2[z].F_QZZ+'</td>';f2 = temp[i].v1[j].v2[z].F_EJZB;}else {secondTd = ''}html +='<tr >'+ ' <td class="text-center" >' + temp[i].v1[j].v2[z].NO + '</td>'+ firstTd+ secondTd+ ' <td class="text-left" >'+temp[i].v1[j].v2[z].F_SJZB+'</td>'+ ' <td class="text-center" >'+temp[i].v1[j].v2[z].F_ZBLX+'</td>'+ ' <td class="text-center" >'+temp[i].v1[j].v2[z].F_TK+'</td>'+ ' <td class="text-center" >'+temp[i].v1[j].v2[z].F_PFZXX+'</td>'+ ' <td class="text-center" >'+temp[i].v1[j].v2[z].F_PFZSX+'</td>'+ scoreTd'</tr>';}}}angular.element("#j-tbody").html(html);$scope.tableList = data.data;// $scope.tableList = temp;$scope.paginationConf.totalItems = data.totalItems;$scope.paginationConf.currentPage = data.currentPage;} else {$scope.dataList = [];$scope.paginationConf.totalItems = 0;$scope.paginationConf.currentPage = 0;Notify.alert("info", "温馨提示：暂无数据");}Metronic.stopPageLoading();}).error(function () {Metronic.stopPageLoading();Notify.alert("error", "获取数据失败");});
核心逻辑
① 将原始数据处理
原始数据：
通过map循环将原始数据进行分组处理
let tempArr = []let temp = []//处理数据源data.data.map((mapItem) => {if (tempArr.length == 0) {tempArr.push({F_YJZB: mapItem.F_YJZB,F_EJZB: mapItem.F_EJZB,F_SJDF: mapItem.F_SJDF,F_XJSJDF: mapItem.F_XJSJDF,F_QZZ: mapItem.F_QZZ,v2: [mapItem]})} else {let res = tempArr.some((item) => {if (item.F_EJZB === mapItem.F_EJZB && item.F_YJZB === mapItem.F_YJZB) {item.v2.push(mapItem)return true}})if (!res) {//如果没找相同的部门添加一个新对象tempArr.push({F_YJZB: mapItem.F_YJZB,F_EJZB: mapItem.F_EJZB,F_SJDF: mapItem.F_SJDF,F_XJSJDF: mapItem.F_XJSJDF,F_QZZ: mapItem.F_QZZ,v2: [mapItem]})}}})console.log("处理二级折叠")console.log(tempArr)tempArr.map((mapItem) => {if (temp.length == 0) {temp.push({F_YJZB: mapItem.F_YJZB,itemLen: mapItem.v2.length,v1: [mapItem]})} else {let res = temp.some((item) => {if (item.F_YJZB === mapItem.F_YJZB) {item.itemLen = item.itemLen + mapItem.v2.length,item.v1.push(mapItem)return true}})if (!res) {//如果没找相同的部门添加一个新对象temp.push({F_YJZB: mapItem.F_YJZB,itemLen: mapItem.v2.length,v1: [mapItem]})}}})console.log("处理一级折叠")console.log(temp)
经过处理后的数据：
将结果拼接为html给需要的table
//动态创建表格let html = "";angular.element('#j-tbody').html('');for (var i = 0; i < temp.length; i++) {let f1 = ''let f2 = ''for (var j = 0; j < temp[i].v1.length; j++) {for (var z = 0; z < temp[i].v1[j].v2.length; z++) {//一级指标let firstTd = '';if (temp[i].v1[j].v2[z].F_YJZB != f1 && temp[i].v1[j].v2[z].F_YJZB != '') {firstTd = '<td class="text-center" rowspan="'+ temp[i].itemLen +'" >'+temp[i].v1[j].v2[z].F_YJZB+'</td>';f1 = temp[i].v1[j].v2[z].F_YJZB;}else {firstTd = ''}//二级指标let secondTd = '';let scoreTd = '';if (temp[i].v1[j].v2[z].F_EJZB != f2 && temp[i].v1[j].v2[z].F_EJZB !=''){secondTd = '<td class="text-center" rowspan="'+ temp[i].v1[j].v2.length +'">'+temp[i].v1[j].v2[z].F_EJZB+'</td>';scoreTd =' <td class="text-center" rowspan="'+ temp[i].v1[j].v2.length +'">'+temp[i].v1[j].v2[z].F_SJDF+'</td>'+ ' <td class="text-center" rowspan="'+ temp[i].v1[j].v2.length +'">'+temp[i].v1[j].v2[z].F_XJSJDF+'</td>'+ ' <td class="text-center" rowspan="'+ temp[i].v1[j].v2.length +'">'+temp[i].v1[j].v2[z].F_QZZ+'</td>';f2 = temp[i].v1[j].v2[z].F_EJZB;}else {secondTd = ''}html +='<tr >'+ ' <td class="text-center" >' + temp[i].v1[j].v2[z].NO + '</td>'+ firstTd+ secondTd+ ' <td class="text-left" >'+temp[i].v1[j].v2[z].F_SJZB+'</td>'+ ' <td class="text-center" >'+temp[i].v1[j].v2[z].F_ZBLX+'</td>'+ ' <td class="text-center" >'+temp[i].v1[j].v2[z].F_TK+'</td>'+ ' <td class="text-center" >'+temp[i].v1[j].v2[z].F_PFZXX+'</td>'+ ' <td class="text-center" >'+temp[i].v1[j].v2[z].F_PFZSX+'</td>'+ scoreTd'</tr>';}}}angular.element("#j-tbody").html(html);
html部分
<tbody id="j-tbody"></tbody>
最终效果：
