当前位置: 首页 > 工具软件 > jQuery Values > 使用案例 >

jQuery dataTable行合并

司徒池暝
2023-12-01
function init() {
	let rowCountIndex, sameNumList,rowCount
	example = $('#dt-table').DataTable({
	    ...
	    "ajax": {
	        "url": "XXX",
	        "type": "get",
	        "data": function (d) {
	           ...
	        },
	        dataSrc: res => {
	            let data = res.data;
	            // 分组数据 *************************************************************{a:[{},{}], b:[{}]}
	            let map = {} // 重组数组对象 为了实现分组
                data.forEach(item => { // 以名字做键分组
                	// 初始化键对应数组 不初始化会报错
                    !map[item.currentTaskName] && (map[item.currentTaskName] = []) 
                     map[item.currentTaskName].push(item)
                })
                data = Object.values(map).flat()  // 获取分组数组并做扁平化处理
	            
	            // 初始化不同元素计数下标一级不同元素计数数组
	            rowCountIndex = 0 // 不同元素移动下标
	            sameNumList = [] // 相同元素计数集合
	            
	             // 封装相同名称出现的次数 供行合并
              	for (let i = 0, len = data.length; i < len; i++) {
                     // 当前坐标下未定义值 则定义值为1 否则值+1
                     !sameNumList[rowCountIndex] ? sameNumList[rowCountIndex] = 1 : sameNumList[rowCountIndex]++
                     // 如果不是最后一项 如果和下一项名称不同 坐标加1
                     i !== len - 1 && data[i].currentTaskName !== data[i + 1].currentTaskName && rowCountIndex++
                 }
	            // 初始化下标 ************************************
	            rowCountIndex = 0 // 不同元素下标
	            rowCount = 0; // 计数
	            return data
	        },
	        "error": function (xhr, textStatus, errorThrown) {
	            var msg = xhr.responseText;
	            console.log(msg)
	        }
	    },
	    "columns": [
	        ...
	    ],
	    "columnDefs": [
	        {
	            "targets": [0], // 要合并的行所在的列
	            "createdCell": function(cell, cellData, rowData, rowIndex, colIndex) {
	            	// 首行合并
	                rowCount === 0 ? $(cell).attr("rowspan",  sameNumList[rowCountIndex]) : $(cell).remove();
	                rowCount++;
	                // 跨行处理
	                if (rowCount === sameNumList[rowCountIndex]) {
	                    rowCountIndex++;
	                    rowCount = 0;
	                }
	            }
	        }
	    ]
	});
 类似资料: