表格列合并。
相邻行,同一列相同的数据进行合并
原始表格展示:
列合并之后:
(1)主要思路是:给每一行数据的每一列
(即每个单元格)
设置其rowspan
和display
属性;
(2)当有同列数据合并时,保留第一个单元格,设置其rowspan
属性为相同的个数,“舍弃”其他相同的单元格,设置其display
属性为none
;
(3)通过mergeData
函数给每一列自定义两个属性来分别记录rowspan
属性和display
;
主要的javaScript
函数:
/**
* 表格合并处理
* TODO 当列大量数据重复时,数据条数展示不对;
* 建议展示序号;
* 此处额外增加了 username 无关字段;仅供演示;
* @param tableData
* @returns {*}
*/
mergeData(tableData) {
try{
for (let item in tableData[0]) {
let current = 0;
let index = 0; //需要在下面for循环之外定义,不然会有错误的结果
while (current < tableData.length) {
tableData[current][item + 'Cols'] = 1;
tableData[current][item + 'Display'] = false;
// 此处 index 应该 < tableData.length 而不是 <=
for (index = current +