背景
使用handsontable只能进行跨列的合并,如果跨行的话就有api提供,我们需要对表头进行跨行合并
实现
这里学习这边博文提供的一个思路,就是假设需要对表格第一行的跨行合并的话,
- 分析第一行的哪些元素是要进行跨行合并的? 这里我猜作者考虑的是如果跨列的话就不考虑这个元素、然后排除hansontable中隐藏列的类(hiddenHeader)
博文链接:https://juejin.cn/post/7097164460762071048
代码如下:
html
<style>
#grid {
width: 800px;
height: 500px;
background-color: #efefef;
}
</style>
<div id="grid"></div>
index.js
let data = [
['张三', 90, 70, 88, 100, 92, 95, 87, 98, 99, 100, 55, 60 ],
['李四', 89, 92, 88, 100, 92, 95, 97, 98, 55, 92, 55, 60 ],
['王五', 100, 70, 82, 99, 92, 95, 97, 98, 69, 88, 55, 99],
['赵六', 77, 91, 81, 75, 91, 75, 96, 91, 77, 96, 55, 60 ]
]
new Handsontable(document.getElementById('grid'), {
data: data,
manualColumnResize: true,
colHeaders: true,
licenseKey: 'non-commercial-and-evaluation',
rowHeaders: true,
manualColumnResize: true,
width: '800',
height: '500',
readOnly: true,
outsideClickDeselects: false,
rowHeights: 28,
columnHeaderHeight: 32,
className: 'htMiddle htCenter',
nestedHeaders: [
['姓名',
{
label: "2021年",
colspan: 6
}, {
label: "2022年",
colspan: 6
}],
['', '语文', '数学', '外语', '政治', '历史', '地理', '语文', '数学', '外语', '政治', '历史', '地理']
],
afterGetColHeader: function(col, th) {
setTimeout(() => {
if (col === -1) {
const theads = th.parentNode.parentNode // 获取当前表头的thead对象
const trs = theads.getElementsByTagName('tr') // 获取所有行
const trCols1 = trs[0].getElementsByTagName('th') // 获取第一行所有列
const trCols2 = trs[1].getElementsByTagName('th') // 获取第二行所有列
if (trCols1.length === trCols2.length) {
// 行号表头将第一行的底部边框去除掉,符合合并单元格样式
// 此处不能执行rowSpan属性,否则出现第二行合表头数据错位
trCols1[0].style.borderBottom = 'none'
for (let i = 1; i < trCols1.length; i++) {
// 如果单元格不包含colSpan属性且不是隐藏的单元格,则表明需要合并行,否则,则表明不需要合并行
if (!trCols1[i].getAttribute('colSpan') && trCols1[i].className !== 'hiddenHeader') {
trCols1[i].rowSpan = 2
trCols1[i].style.verticalAlign = 'middle'
trCols1[i].style.height = '64px'
// 将第二行表格隐藏,并将第一行的底部边框去除
trCols2[i].className = 'hiddenHeader'
trCols1[i].style.borderBottom = 'none'
}
}
}
}
}, 100)
}
});
效果
原文地址:http://www.cnblogs.com/it774274680/p/16830535.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性