我在网格中有20列。我希望将网格分成两半,在左半部分我可以滚动前10列,在右半部分我可以滚动后10列。换句话说,我希望在同一个网格中有两个水平滚动。这可能吗?
11dmarpk1#
ag-Grid本身并不具备您要实现的功能。一个解决方案是使用pinned columns,在左侧固定10列。问题是您无法滚动固定的列,因此您需要添加一些额外的css来修改网格以满足您的需要。注意:这是一个非常笨拙的解决方案:在css中添加以下代码,使固定的列可以滚动(将宽度从200px更改为您想要的宽度):
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)
Demo .
fivyi3re2#
对于那些对ViqMontana解决方案感兴趣的人:在28.1.1版本中,他们添加了一个新的事件监听器,它可以重置头部中的任何滚动(提交12552505)。它说这将修复bug“AG-7137”,我无法找到它是什么。可以在网格准备就绪后删除此侦听器:
const api = this.gridOptions.api; api?.ctrlsService.leftHeaderRowContainerCtrl.destroyFunctions[6]?.(); api?.ctrlsService.rightHeaderRowContainerCtrl.destroyFunctions[6]?.();
在此之后,标题正确滚动。当使用TypeScript时,需要将API强制转换为any。
2条答案
按热度按时间11dmarpk1#
ag-Grid本身并不具备您要实现的功能。一个解决方案是使用pinned columns,在左侧固定10列。问题是您无法滚动固定的列,因此您需要添加一些额外的css来修改网格以满足您的需要。
注意:这是一个非常笨拙的解决方案:
在css中添加以下代码,使固定的列可以滚动(将宽度从
200px
更改为您想要的宽度):您还需要确保固定的列标题与固定的列沿着滚动。为此,您可以使用事件侦听器:
Demo .
fivyi3re2#
对于那些对ViqMontana解决方案感兴趣的人:在28.1.1版本中,他们添加了一个新的事件监听器,它可以重置头部中的任何滚动(提交12552505)。它说这将修复bug“AG-7137”,我无法找到它是什么。
可以在网格准备就绪后删除此侦听器:
在此之后,标题正确滚动。当使用TypeScript时,需要将API强制转换为any。