dragTreeTable表格高度自适应
时间: 2023-07-22 12:02:59 浏览: 101
要实现 dragTreeTable 表格高度自适应,可以采用以下方法:
1. 获取表格的实际内容高度,可以通过遍历表格的所有行,计算所有行的高度之和来获取。
2. 设置表格的高度为实际内容高度,可以使用 CSS 的 height 属性来设置表格的高度。
3. 监听窗口大小变化事件,当窗口大小发生变化时重新计算表格的实际内容高度并更新表格的高度。
下面是一个示例代码:
```html
<div class="table-wrapper">
<table id="dragTreeTable">
<!-- 表格内容 -->
</table>
</div>
<script>
// 获取表格实际内容高度
function getTableContentHeight() {
var rows = document.querySelectorAll('#dragTreeTable tr');
var height = 0;
for (var i = 0; i < rows.length; i++) {
height += rows[i].offsetHeight;
}
return height;
}
// 设置表格高度为实际内容高度
function setTableHeight() {
var tableWrapper = document.querySelector('.table-wrapper');
var tableContentHeight = getTableContentHeight();
tableWrapper.style.height = tableContentHeight + 'px';
}
// 监听窗口大小变化事件
window.addEventListener('resize', function() {
setTableHeight();
});
// 初始化表格高度
setTableHeight();
</script>
<style>
.table-wrapper {
overflow: auto;
}
</style>
```
在上述示例代码中,我们将表格包裹在一个 div 容器中,并将容器的样式设置为 overflow: auto,以便在表格内容超出容器高度时出现滚动条。然后在 JavaScript 中,通过遍历表格的所有行来获取表格实际内容高度,并使用 CSS 的 height 属性将表格的高度设置为实际内容高度。最后,我们监听窗口大小变化事件,当窗口大小发生变化时重新计算表格的实际内容高度并更新表格的高度。
阅读全文