调整大小后如何正确更新（重绘）grid.js

Question

我已经在 Vue 中设置了 grid.js。 https://github.com/grid-js/gridjs

我在配置中设置了autoWidth: true和width: '100%'

当我调整 window 大小时，数据网格会调整大小（响应）。

但是，如果 window 或容器元素的大小调整后大于初始大小，则网格不会随之调整大小。但是，它将正确地调整得更小。

然后我使用了 element-resize-detector (https://github.com/wnr/element-resize-detector/) 观察容器元素的变化并调用

grid.updateConfig(this.config).forceRender();

将网格重新绘制为新的容器大小。这可行，但会导致列排序出现问题。

我正在修改代码来解决这个问题，但想知道是否有人对此有 good/better 解决方案。

Answer 1

要在调整大小后正确更新 grid.js，您可以看看

在调整大小时使用 .updateConfig() 不是一个好主意，因为每次调整大小时，table 都会重绘。选择此选项会降低用户体验，并且对于大型数据集来说会非常烦人。

要使用他的容器调整 table 的大小，您需要侦听容器的大小并通过搜索带有 gridjs-wrapper [=25= 的元素将其设置为 table ].这样，当您的容器调整网格大小时，网格会自动调整大小而无需更新。

我不使用 Vue 框架，但这是这里想法的一个快速示例：

grid = new gridjs.Grid({
    /* set up you're grid here */
}).render(YOUR_CONTAINER);

// Resize you're grid or call it whenever you want 
setGridSize();

// set the size listener to your grid container
new ResizeObserver(() => setGridSize()).observe(YOUR_CONTAINER);

// function to resize the table with the container size        
function setGridSize(){
  // The grid js wrapper element (assuming you've just one grid on you're page)
  var mywrapper = document.getElementsByClassName("gridjs-wrapper");
  // height and with of you're container
  var height = YOUR_CONTAINER.clientHeight;
  var width = YOUR_CONTAINER.clientWidth;
  // Set it to your grid js wrapper
  mywrapper[0].style.height = height.toString() + "px";
  mywrapper[0].style.width = widht.toString() + "px";
}

调整大小后如何正确更新（重绘）grid.js

How to correctly update (redraw) grid.js after resize

javascript

vue.js

vue-component

gridjs