在可调整大小的容器中呈现 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() 方法设置高度并重新渲染所有数据,但这是无稽之谈(如果数据集非常大,则更是如此)。
为了解决这个问题,我在 gridjs.Grid 配置界面之外设置了“gridjs-wrapper”的高度和 with,并使用来自连接到我的容器的调整大小侦听器的值动态调整我的包装器的大小。
grid = new gridjs.Grid({
columns: [/*A lot of column*/],
fixedHeader: true,
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";
}
此解决方案有效,但我想知道是否有人有其他更有效的方法。