简体   繁体   English

更改 Ag-Grid 无限滚动块大小?

[英]Change Ag-Grid infinite scroll block size?

Is there a way to change the block size when the row model used is "infinite" and a datasource is set?当使用的行模型为“无限”并且设置了数据源时,有没有办法更改块大小?

Ie when the datasource's getRows() is called, is there a way to set startRow and/or endRow ?即当数据源的getRows()被调用时,有没有办法设置startRow和/或endRow Default behaviour is to fetch 100 rows at a time which results in blank rows for me, since I only have about ~12 new data rows coming in at a time with infinite scroll.默认行为是一次获取 100 行,这会导致我的空白行,因为我一次只有大约 12 行新数据行无限滚动。 So, when getRows() is triggered, it'll try to fetch rows 100 to 200 (as an example) when there are only 45 data points in the first place.因此,当getRows()被触发时,当最初只有 45 个数据点时,它会尝试获取第 100 到 200 行(例如)。 To compensate it adds a bunch of blank rows.为了补偿它添加了一堆空白行。

I've tried the following two additional grid options without success:我尝试了以下两个额外的网格选项但没有成功:

cacheOverflowSize: 2
infiniteInitialRowCount: 32

Fetching 100 rows at a time instead of 12 solves the issue, but I'd reeeeeally rather not do this (due to some design constraints of the product I'm working on).一次获取 100 行而不是 12 行解决了这个问题,但我确实宁愿不这样做(由于我正在开发的产品的一些设计限制)。

Shoutout to @kamil-kubicki for their comment.感谢@kamil-kubicki 的评论。 cacheBlockSize was indeed what I was looking for. cacheBlockSize确实是我想要的。 It didn't solve my whole problem though, so I'll outline my complete solution below.尽管如此,它并没有解决我的整个问题,所以我将在下面概述我的完整解决方案。

I had ag-grid's row height set to the default 25px max.我将 ag-grid 的行高设置为默认的最大25px That meant that on load, when it was populating the initial data, it was coming close to rendering my entire initial data set of 32 items.这意味着在加载时,当它填充初始数据时,它接近呈现我的 32 个项目的整个初始数据集。 On scroll, getRows() would then look for rows outside of the total data collection's bounds, so it added blank rows.在滚动时, getRows()然后会查找总数据集合边界之外的行,因此它添加了空白行。

I changed how many data results are loaded on each scroll to 50. This is relatively large but it works and is performant for now, so I think I'll keep it.我将每次滚动加载的数据结果数量更改为 50。这相对较大,但它现在可以工作并且性能良好,所以我想我会保留它。

For those with a similar problem:对于有类似问题的人:

  1. Use cacheBlockSize in gridOptions使用cacheBlockSizegridOptions

  2. Make sure that your ag-grid isn't rendering anything close to your full initial data collection (eg if your collection is 32 items, don't render anything above like 16 items - control this by changing the height of your rows and the size of your grid)确保你的 ag-grid 没有渲染任何接近你完整的初始数据集合的东西(例如,如果你的集合是 32 个项目,不要渲染超过 16 个项目的任何东西 - 通过更改行的高度和大小来控制它你的网格)

  3. Change how many data items are loaded in to your collection on scroll to a larger number;将滚动时加载到您的集合中的数据项更改为更大的数字; something that can populate data faster than the user can scroll.可以比用户滚动速度更快地填充数据的东西。 For me it was 50. For you it might be more, or less.对我来说是 50。对你来说可能更多,也可能更少。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM