本文介绍了大型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，并使用连接到我的容器的RESIZE侦听器的值动态调整包装的大小。
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";
}
这篇关于大型Grid.js响应表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！