javascript - Grid.js 响应式大尺寸表
问题描述
在可调整大小的容器中呈现 grid.js 表的最佳方法是什么。
如果我不设置网格的高度配置对象,表格大小超出了他的容器,我无法访问表格末尾的溢出栏。
grid = new gridjs.Grid({
columns: [/*A lot of column*/],
fixedHeader: true,
width: document.getElementById("MY_CONTAINER_ID").clientWidth,
height: document.getElementById("MY_CONTAINER_ID").clientHeight,
data: () => {
return new Promise(resolve => {
setTimeout(() =>
resolve([/*A lot of rows*/]), 2000);
});
}
}).render(document.getElementById("MY_CONTAINER_ID"));
出于可调整 div 的目的,我们可以使用 .updateConfig() 方法设置高度并重新渲染所有数据,但这是无稽之谈(如果数据集非常大,甚至更多)。
解决方案
为了解决这个问题,我使用ResizeObserver()
我在 gridjs.Grid 配置界面之外设置了“gridjs-wrapper”的高度和 with,并使用来自连接到我的容器的调整大小侦听器的值动态调整我的包装器的大小。
grid = new gridjs.Grid({
columns: [/*A lot of column*/],
fixedHeader: true,
width: document.getElementById("MY_CONTAINER_ID").clientWidth,
height: document.getElementById("MY_CONTAINER_ID").clientHeight,
data: () => {
return new Promise(resolve => {
setTimeout(() =>
resolve([/*A lot of rows*/]), 2000);
});
}
}).render(document.getElementById("MY_CONTAINER_ID"));
setGridSize();
new ResizeObserver(() => setGridSize()).observe(document.getElementById("MY_CONTAINER_ID"));
function setGridSize(){
var mywrapper = document.getElementsByClassName("gridjs-wrapper");
var height = document.getElementById("MY_CONTAINER_ID").clientHeight;
var width = document.getElementById("MY_CONTAINER_ID").clientWidth;
mywrapper[0].style.height = height.toString() + "px";
mywrapper[0].style.width = widht.toString() + "px";
}
推荐阅读
- c# - 如何从 JSON 字符串中提取这些值
- excel - 我的“插入复制的单元格”vba 代码不断崩溃?
- java - 如何使用 Hibernate 在表中插入新行?
- sql - Proc SQL 将日期添加到日期
- security - HTTPS 标头或帖子正文更安全吗?
- google-sheets - 根据单元格值在工作表之间移动行
- python - 为什么默认的 pylintrc 有这么多禁用的消息?
- .net-core - 在 .netcore API 项目中实现 Microsoft Graph API
- javascript - 预定数量的捕获组
- twitter - 如何将 Neo4j 沙盒项目数据(俄罗斯 Twitter 巨魔)直接带到我本地笔记本电脑上的 Neo4j 桌面