概述
在前端开发中，表格展示数据是常见的需求。但是，当数据过多时，前端渲染数据的效果会受到很大的影响，甚至出现卡顿现象。为了解决这个问题，我们可以使用 server-side row model，其能够减少前端数据渲染的压力，提高数据展示效率。
本文将介绍如何使用 npm 包 @ag-grid-enterprise/server-side-row-model 实现 server-side row model，并提供使用教程和示例代码，帮助读者更好地了解和使用该技术。
安装
使用 npm 安装 @ag-grid-enterprise/server-side-row-model 包：
npm i --save @ag-grid-enterprise/server-side-row-model
使用
初始化 gridOptions
在使用 server-side row model 之前，我们需要对 ag-Grid 进行一些配置。我们可以设置相应的 gridOptions 属性，以便使用该模型。
-- -------------------- ---- -------
----- ----------- - -
--------------- ----
----------------- ---
------------- -------------
-------------------- ----------
------------- -----------
----------- -
-
----------- -----
------ -----
--------- -----
------- ----
--
-
----------- -------
------ -------
--------- -----
------- ----
--
-
----------- ------
------ ------
--------- -----
------- ----
-
--
---
--在上述代码中，我们设置了一些 gridOptions 属性：
- cacheBlockSize：设置每次从服务器获取多少数据行。
- maxBlocksInCache：设置缓存最大块数。
- rowModelType：设置行模型类型为 serverSide。
- serverSideStoreType：设置存储类型为 partial。
- rowSelection：设置行选择类型为 multiple。
- columnDefs：设置列定义。
数据源
定义数据源的时候，需要实现 ServerSideDatasource 接口。该接口需要实现如下方法：
interface ServerSideDatasource {
getRows(params: IServerSideGetRowsParams): void;
}其中，getRows 方法是必须实现的。该方法的参数 params 包含了请求需要的所有信息，例如排序、筛选、分页等。
下面是一个数据源示例：
-- -------------------- ---- -------
----- -------------------- ---------- --------------------- -
-- ----- ------ -- --------- ----
------- -------- ---------- -------
---------------------- ------- -
-------------- - ----------
-
--------------- -------------------------- ---- -
----- --------- - -------
----- ---------- ------- ------------- ---------- ------------ - --------
-- ---- --- ------ ------ ---- ---- --- ---- -- -------
----- ---- - ----------------------------- ------- ------------- ---------- -------------
-- ---- --- ------- --------
---------------------------- ----------------
-
-
-------- ----------------------------- ------- ------------- ---------- ------------ -
-- --------- --- ---- ------ ---- ---- -- ---- -------
-在上述代码中，我们定义了一个 ServerSideDatasource 类，它实现了 IServerSideDatasource 接口。我们通过 fetchRowsFromServer 方法获取从 startRow 到 endRow 中需要的行数据。然后，我们调用 successCallback 回调函数将获取到的 rows 和总行数 this.totalRows 传递给 ag-Grid。
绑定数据源
当 gridOptions 和数据源都准备好之后，我们需要将它们绑定起来。我们可以通过 gridOptions.api.setServerSideDatasource 方法实现该功能。
gridOptions.api.setServerSideDatasource(new ServerSideDatasource(1000));
在上述代码中，我们通过 setServerSideDatasource 方法将数据源和 gridOptions 绑定起来。我们通过 ServerSideDatasource 类创建数据源实例，并将实例作为参数传递给该方法。
总结
通过本文的介绍，我们了解了如何使用 npm 包 @ag-grid-enterprise/server-side-row-model 实现 server-side row model。我们首先对 ag-Grid 进行了一些配置，然后实现了 IServerSideDatasource 接口。最后，我们将 gridOptions 和数据源绑定起来，实现了 server-side row model 的应用。
以上内容具有深度和学习意义，并提供了使用教程和示例代码，帮助读者更好地理解和使用该技术。如果读者有相关的开发需求，可以尝试使用 server-side row model。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedac8eb5cbfe1ea0610a77