简介
Slickgrid-plus 是一个基于 SlickGrid 的增强版，用于快速构建高性能、灵活可扩展的表格组件。它支持前端数据绑定、无限滚动、编辑、分组等复杂功能，并提供了大量的插件，以满足开发者对表格的各种需求。本文将介绍使用 Slickgrid-plus 来构建一个分页表格并展示其用法。
安装
可以通过以下命令在项目中安装 Slickgrid-plus：
npm install slickgrid-plus
使用
前置准备
使用 Slickgrid-plus 构建分页表格，需要先准备好要展示的数据，并将其转化为 Slickgrid-plus 能识别的格式。通常情况下，需要将数据转化为如下格式：
-- -------------------- ---- -------
-
----- --
------- --------
-------- --
--
-
----- --
------- ---------
-------- -
--
-- ---引入依赖
在 HTML 中引入 Slickgrid-plus 的依赖：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slickgrid-plus/dist/slickgrid-plus.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/slickgrid-plus/dist/slickgrid-plus.min.js"></script>
构建表格
使用 Slickgrid-plus 构建分页表格的具体流程如下：
初始化表格参数和配置
-- -------------------- ---- -------
--- ---- - -
-- --- --
--
--- ------- - -
-
--- -----
----- -----
------ -----
--------- ----
--
-
--- -------
----- -------
------ -------
--------- ----
--
-
--- --------
----- --------
------ --------
--------- ----
-
--
--- ------------ - -
--------- --- -- ------
-------- -- -- -------
--------- ---- --- ---- -- ----------
------------- ---- -- ----------
--
--- ------- - -
--------------------- -----
-------------------- -----
--以上代码中，定义了四个变量：
data: 需要显示的数据，按照 Slickgrid-plus 的格式进行组织；columns: 表格的列配置，指明了每一列的显示文本和数据来源等信息；pagerOptions: 分页器的配置，指定了每页显示的数据量、支持的选择器和是否采用远程分页方式；options: 表格的其他配置，例如可以启用单元格编辑、列宽调整、列排序等功能，详情请参考 Slickgrid-plus 的文档。
渲染表格
var grid = new Slick.Grid('#myGrid', data, columns, options);
var pager = new Slick.Controls.Pager(
dataView,
grid,
$('#myPager')
);以上代码中，首先使用 new 关键字初始化了一个表格对象 grid，并使用 Slick.Grid 方法将它渲染在 #myGrid 元素上。 接着使用 new 关键字初始化一个分页器对象 pager，并使用 Slick.Controls.Pager 方法将它渲染在 #myPager 元素上。其中，dataView 对象是 Slickgrid-plus 内部使用的数据视图对象，常用于绑定数据和进行分页操作。
远程分页
如果需要开启远程分页功能，需要使用 DataView 对象辅助实现。在初始化表格时，先按上述方式初始化 pagerOptions 变量，然后添加以下代码：
-- -------------------- ---- -------
--- -------- - --- ----------------------
--- ----------- - --- ------------------
--------------- -- ---- --- - ---
--------- -- ------
------------ -- -------
--
-- ------------
-------------------------------------
-- ------
----------------------- -- -
--------------
---
-- ------------
------------------------------------- --- ----- -
-----------------------------------------
----------------------- -- -
--------------
---
---其中，Slick.Data.DataView() 表示初始化一个数据视图对象，Slick.RemoteModel() 方法表示创建一个远程模型对象，这个模型对象通过给定的 URL 和参数配置，可以支持查询和分页操作。在数据视图对象中，调用 setRemoteModel() 方法，将远程模型对象设为数据视图所使用的模型，然后调用 fetch() 方法来加载数据。在列表渲染完成后，监听分页器的页码改变事件，然后在回调函数中调用 fetch() 方法，来获取新页码下的数据，并重新渲染表格。
示例代码
下面是一个完整的 Slickgrid-plus 分页表格的示例代码：
-- -------------------- ---- -------
------
------
----- ---------------- -------------------------------------------------------------------------------
------- ----------------------------------------------------------------------
------- --------------------------------------------------------------------------------------
-------
------
---- ----------- ------------- ------------- --------------
---- ------------ -------------- -------------
--------
--- ---- - -
-
----- --
------- --------
-------- --
--
-
----- --
------- ---------
-------- -
--
-- ---
--
--- ------- - -
-
--- -----
----- -----
------ -----
--------- ----
--
-
--- -------
----- -------
------ -------
--------- ----
--
-
--- --------
----- --------
------ --------
--------- ----
-
--
--- ------------ - -
--------- ---
-------- --
--------- ---- --- ----
------------- ----
--
--- ------- - -
--------------------- -----
-------------------- -----
--
--- ---- - --- --------------------- ----- -------- ---------
-- --------------------------- -
--- -------- - --- ----------------------
--- ----------- - --- ------------------
---------------
---------
------------
--
-------------------------------------
----------------------- -- -
--------------
---
------------------ - --------------------
----------------------- - ------------------------- - --
- ---- -
--- -------- - --- ----------------------
--- ----------- - -----
------------------------
------------------ - --------------------- - -----------------------
----------------------- - ---------------------
-
--- ----- - --- ---------------------
---------
-----
--------------
------------
--
------------------------------------- --- ----- -
-- --------------------------- -
-----------------------------------------
----------------------- -- -
--------------
---
----------------------- - ------------------------- - --
- ---- -
-----------------------
--- ------- - -------------
----------------------- - --------
------------------ - ------------------------------ - -----------------------
-----------------------
------------------------------------ - ---------------------- -------- - -- - ------------------------
---------------------
-
---
---------
-------
-------结语
Slickgrid-plus 是一款非常强大的表格组件，支持前端数据绑定、分页、过滤、排序、编辑等各种复杂功能。本文着重介绍了如何使用 Slickgrid-plus 搭建一个分页表格，并在其中加入远程分页的功能演示。如有疑问，欢迎留言交流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005587581e8991b448d5b14