reactjs - Ag-Grid - 如何在同一个网格中制作两个水平滚动？

Question

我在网格中有 20 列。我希望将网格分成两半，在左半部分我可以滚动浏览前 10 列，在右半部分我可以滚动浏览最后 10 列。换句话说，我希望在同一个网格中有两个水平滚动。可能吗？

标签： reactjsag-gridag-grid-react

Answer 1

您尝试实现的功能本身并不存在于 ag-Grid 中。一种解决方案是使用固定列，将 10 列固定在左侧。问题是您无法滚动固定列，因此您需要添加一些额外的 css 以根据您的需要修改网格。

注意。这是非常hacky的解决方案：

将以下内容添加到您的 css 以使固定列可滚动（将宽度从200px您想要的宽度更改）：

.ag-pinned-left-cols-container {
  min-width: 200px !important;
  width: 200px !important;
  overflow: auto !important;
}

.ag-horizontal-left-spacer {
  width: 200px !important;
  max-width: 200px !important;
  min-width: 200px !important;
}

.ag-pinned-left-header{
  width: 200px !important;
  max-width: 200px !important;
  min-width: 200px !important;
  overflow: hidden !important;
}

您还需要确保固定列标题与固定列一起滚动。为此，您可以使用事件侦听器：

document.getElementsByClassName('ag-pinned-left-cols-container')[0].addEventListener("scroll", this.runOnScroll, {passive: true});

runOnScroll =  function(evt) {
  document.getElementsByClassName('ag-pinned-left-header')[0].scrollTo(evt.srcElement.scrollLeft, 0)

演示。