js中动态合并单元格
程序员文章站
2022-03-11 16:34:55
...
前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>巡检结果报表</title>
<#include "/common.html">
</head>
<body>
<div id="rrapp" v-cloak>
<div v-show="showList">
<div class="searchbox">
<form class="layui-form">
<div class="searchbox-inline">
<label>部门选择：</label>
<div>
<input type="text" v-model="q.deptName" @click="deptTree($event)" readonly="readonly" autocomplete="off" class="layui-input">
</div>
</div>
<div class="searchbox-inline">
<label>时间查询：</label>
<div>
<input type="text" autocomplete="off" id="time" class="layui-input" v-model="q.time" placeholder="选择要查看的日期">
</div>
</div>
<div class="searchbox-inline">
<label style="opacity: 0">搜索</label>
<div>
<span class="layui-btn layui-icon layui-icon-search layui-btn-blue" @click="query" title="查询"></span>
</div>
</div>
</form>
</div>
<table class="layui-table" id="aduitTable">
<thead>
<tr style="text-align: center">
<td colspan="11" style="font-weight: bold; font-size: 18px;">巡检时间修改报表</td>
</tr>
<!--列名-->
<tr style="text-align: center">
<td style="width: 120px">部门名称</td>
<td>线别名称</td>
<td>区间/站场</td>
<td>公里标</td>
<td>巡检开始时间</td>
<td>巡检结束时间</td>
<td>工作开始时间</td>
<td>工作结束时间</td>
<td>创建人</td>
<td>创建时间</td>
<td style="width: 80px">修改原因</td>
</tr>
</thead>
<tbody id="aduitTableTr">
</tbody>
</table>
</div>
<div>
</div>
</div>
<!-- 选择部门 -->
<div id="deptLayer" style="display: none;padding:10px;">
<ul id="deptTree" class="ztree"></ul>
</div>
<script src="${request.contextPath}/statics/js/modules/inspection/updatetimereport.js?_${.now?long}"></script>
</body>
</html>
JS页面
var setting = {
data: {
simpleData: {
enable: true,
idKey: "deptId",
pIdKey: "parentId",
rootPId: -1
},
key: {
url: "nourl"
}
}
};
$(function () {
vm.query();
layui.use('laydate', function () {
var laydate = layui.laydate;
laydate.render({
elem: '#time',
trigger: 'click',
type: 'datetime',
range: true,
done: function (value, date, endDate) {
vm.q.time = value;
}
});
});
});
function unique1(array) {
var n = []; //一个新的临时数组
//遍历当前数组
for (var i = 0; i < array.length; i++) {
//如果当前数组的第i已经保存进了临时数组，那么跳过，
//否则把当前项push到临时数组里面
if (n.indexOf(array[i]) == -1) n.push(array[i]);
}
return n;
}
var ztree;
var vm = new Vue({
el: '#rrapp',
data: {
test: null,
showList: true,
q: {
deptId: "",
deptName: "",
time: ""
},
reportList: [],
sectionPositionName: "全部",
uploadList: []
},
mounted: function () {
this.getDept();
},
methods: {
exportExcel: function () {
window.location.href = baseURL + 'inspection/inspectionaudit/export?time=' + vm.q.time + "&deptId=" + vm.q.deptId;
},
query: function () {
$.ajax({
type: "POST",
url: baseURL + 'inspection/inspectionplanupdatetime/updateTimeReport',
data: vm.q,
success: function (r) {
if (r.code === 0) {
$('#aduitTableTr').empty();
var forNum = -1;
for (var s = 0; s < r.list.length; s++) {
vm.reportList = r.list[s];
var html = "";
var planIds = [];
for (var i = 0; i < vm.reportList.length; i++) {
planIds.push(vm.reportList[i].planId);
}
planIds = unique1(planIds);
for (var i = 0; i < vm.reportList.length; i++) {
forNum = forNum + 1;
var item = vm.reportList[i];
for (var o in item) {
if (item[o] == null) {
item[o] = "";
}
}
html = '<tr> ' +
' <td class="txt_center">' + item.deptName + '</td> ' +
' <td class="txt_center">' + item.lineName + '</td> ' +
' <td class="txt_center">' + item.region + '</td> ' +
' <td class="txt_center">' + item.mileages + '</td> ' +
' <td class="txt_center">' + item.beforeAndAfterUpdatePlanStartTime + '</td> ' +
' <td class="txt_center">' + item.beforeAndAfterUpdatePlanFinishTime + '</td> ' +
' <td class="txt_center">' + item.beforeAndAfterUpdateWorkStartTime + '</td> ' +
' <td class="txt_center">' + item.beforeAndAfterUpdateWorkEndTime + '</td> ' +
' <td class="txt_center">' + item.updateUserName + '</td> ' +
' <td class="txt_center">' + item.updateTime + '</td> ' +
' <td class="txt_center">' + item.updateMessage + '</td> ' +
'</tr> ';
$('#aduitTableTr').append(html);
}
}
if (html) {
//！！！合并语句，第一个0为开始行，第二个0为结束行，中括号内为要合并的列，以下标计算
vm.MergeCell('aduitTableTr', 0, 0, [0, 1, 2, 3]);
}
} else {
alert(r.msg);
}
}
});
},
getDept: function () {
//加载部门树
$.get(baseURL + "sys/dept/select", function (r) {
ztree = $.fn.zTree.init($("#deptTree"), setting, r.deptList);
var node = ztree.getNodeByParam("deptId", vm.q.deptId);
if (node != null)
vm.q.deptName = node.name;
})
},
deptTree: function (event) {
layer.open({
type: 1,
offset: '50px',
skin: 'layui-layer-molv',
title: "选择部门",
area: ['300px', '450px'],
shade: 0,
shadeClose: false,
content: jQuery("#deptLayer"),
btn: ['确定', '取消'],
btn1: function (index) {
var node = ztree.getSelectedNodes();
vm.q.deptId = node[0].deptId;
vm.q.deptName = node[0].name;
layer.close(index);
}
});
},
//动态合并的具体算法
MergeCell: function (tableId, startRow, endRow, colArr) {
var tb = document.getElementById(tableId);
//当检查第0列时检查所有行
if (endRow == 0) {
endRow = tb.rows.length - 1;
}
for (var j = 0; j < colArr.length; j++) {
var col = colArr[j];
if (col >= tb.rows[0].cells.length) {
return;
}
startRow = 0;
for (var i = startRow; i < endRow; i++) {
//程序是自左向右合并
if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[col].innerHTML) {
//如果相同则删除下一行的第0列单元格
tb.rows[i + 1].cells[col].style.display = 'none';
//更新rowSpan属性
tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1;
//当循环到终止行前一行并且起始行和终止行不相同时递归(因为上面的代码已经检查了i+1行，所以此处只到endRow-1)
if (i == endRow - 1 && startRow != endRow) {
//this.MergeCell(tableId, startRow, endRow, col + 1);
}
} else {
//起始行，终止行不变，检查下一列
//this.MergeCell(tableId, startRow, i, col + 1);
//增加起始行
startRow = i + 1;
}
}
}
}
}
});
下一篇： 使用Etag来实现前端缓存