@ag-grid-community/infinite-row-model 是一个可以实现大数据量表格加载优化的 npm 包，使用该包可以将表格数据分段加载并显示，避免由于表格数据量过大而导致页面卡死。本文将详细介绍 npm 包 @ag-grid-community/infinite-row-model 的使用方法，并提供示例代码以供参考。
安装
使用 npm 或 yarn 进行安装：
npm install @ag-grid-community/infinite-row-model --save yarn add @ag-grid-community/infinite-row-model
使用
使用 @ag-grid-community/infinite-row-model 的前提是已经安装并使用了 ag-grid 包。下面的示例代码将介绍如何在 ag-grid 中使用 @ag-grid-community/infinite-row-model。
-- -------------------- ---- -------
-- -- -------
------ - ---- - ---- --------------------
-- -- -------------------------------------
------ - ---------------- - ---- ----------------------------------------
-- -- ---- --
----- ---- - --- ------------- -------------
-- -- --------
------------------------ - -----------
------------------------ - -----------------
-- -----
---------------------- - -
-- ---------
-------- -------- -- -
---------------------- --------
-- -------------
----- -------- - ----------------
-- ----------
----- ------ - --------------
-- --------------- ---- ---
----- ------------ - -------------------- --------
-- --------------- ------------------
----- ------- - ----------- -- ------ - ----------- - ----------
-- ------------
------------------------------------ ---------
-
--通过以上代码，我们可以看到如何将 @ag-grid-community/infinite-row-model 和 ag-grid 集成使用。
代码解析
在上面的代码示例中，我们使用了 @ag-grid-community/infinite-row-model ，通过 new InfiniteRowModel() 方法创建一个无限滚动 rowModel，并设置 gridOptions 的 rowModelType 属性为 'infinite' 或 InfiniteRowModel。
此时，我们需要提供一个可以请求数据的方法，数据请求完成后再通过 params.successCallback() 方法将请求到的数据交给 grid 组件进行显示。在 getRows() 方法中，我们获取当前所需数据的起始坐标和结束坐标，通过数据分段的方式进行加载和显示。
实例
下面我们会通过一个完整的例子来介绍 @ag-grid-community/infinite-row-model 的使用方法。
<!-- index.html --> <div id="myGrid" style="height: 500px;width:100%;" class="ag-theme-alpine"></div>
-- -------------------- ---- -------
-- --------
-- -- ------- - -------------------------------------
------ - ---- - ---- --------------------
------ - ---------------- - ---- ----------------------------------------
-- ------ --- --
----- ------- - ----------------------------------
-- ---------
----- ---- - ---
--- ---- - - -- - - ------ ---- -
-----------
--- --
----- --------- - ----
---- ------------------------ - ----
------ ------------------------------ - --------------------------------- - --------
---
-
-- -- ---- -------
----- ----------- - -
-- ----
------ ------------------
-- -------
----------- -
- ----------- ----- ------ ----- ------ -- --
- ----------- ------- ------ ------- --------- --- --
- ----------- ------ ------ ------ --------- -- --
- ----------- -------- ------ -------- --------- --- -
--
-- -------------
------------------------ ----
-- -----------
------------ -------- -- -
-- -- --------
---------------------------------------
--------------------------
-------- -------- -- -
---------------------- --------
-- -------------
----- -------- - ----------------
-- ----------
----- ------ - --------------
-- --------------- ---- ---
----- ------------ - -------------------- --------
-- --------------- ------------------
----- ------- - ----------- -- ------ - ----------- - ----------
-- ------------
------------------------------------ ---------
-
---
-
--
-- -- ---- ---------
----- ---- - --- ------------- -------------通过以上代码示例，我们可以很清晰地了解到如何使用 @ag-grid-community/infinite-row-model 实现大数据量表格加载。具体包括使用 getRows() 方法请求数据，以及如何通过分段渲染的方式进行数据加载和处理。
结语
本文描述了如何使用 @ag-grid-community/infinite-row-model 实现大数据量表格的优化处理，从而避免由于页面卡顿而影响用户使用体验。同时，我们还详细介绍了如何使用 getRows() 方法实现数据分段请求和加载，为开发者提供了参考和借鉴。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbc89b5cbfe1ea0611a1e