介绍
redux-grid-core 是一个基于 react-redux 的表格组件库，使用简便，功能全面。它提供了丰富的表格操作功能，包括排序、过滤、分页等，可以满足绝大部分数据表格需求。
安装
使用 npm 安装：
npm install redux-grid-core --save
使用
引入
import ReduxGrid, { columnTypes } from 'redux-grid-core';数据
redux-grid-core 需要一个数据数组进行渲染。数据可以从后端接口获取，也可以直接传递进来。数据格式如下：
-- -------------------- ---- -------
----- ---- - -
-
--- --
----- -----
---- ---
------- ----
--
-
--- --
----- -----
---- ---
------- ----
--
-- ---
--列
redux-grid-core 需要指定表格的列。每一列可以设置头部名字、数据字段、数据类型等属性。例如，下面的代码定义了三列：姓名、年龄、性别。其中，姓名和性别使用字符串类型，年龄使用数字类型。
-- -------------------- ---- -------
----- ------- - -
-
----- -----
-------- -------
--------- -------------------
--
-
----- -----
-------- ------
--------- -------------------
--
-
----- -----
-------- ---------
--------- -------------------
--
--高阶组件
使用 redux-grid-core 需要一个高阶组件来包装表格组件。在高阶组件中，可以设置一些表格行为和样式。下面的代码使用高阶组件创建了一个简单的表格：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ ---------- - ----------- - ---- ------------------
----- ---- - ------
----- ------- - ------
----- ------- ------- --------------- -
-------- -
------ -
----------
-----------
-----------------
-------------------------
---------------------
--
--
-
-
------ ------- -------------------ReduxGrid 组件接收四个参数：
- data：表格所需的数据
- columns：表格的列定义
- tableClassName：表格容器的 class 名称
- rowClassName：表格行的 class 名称
生命周期
redux-grid-core 提供了一些生命周期方法，可以用来处理表格的初始化和销毁。下面的代码展示了三个例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ ---------- - ----------- - ---- ------------------
----- ---- - ------
----- ------- - ------
----- ------- ------- --------------- -
------------------- -
-- -----
--------------------- ----- ------ ---
-
-------------------- -
-- ------
--------------------- ----- -------- ---
-
---------------------- -
-- ----
--------------------- ----- --------- ---
-
-------- -
------ -
----------
-----------
-----------------
-------------------------
---------------------
--
--
-
-
------ ------- -------------------示例代码
下面的代码展示了一个完整的例子。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ ---------- - ----------- - ---- ------------------
------ -----------------------------------------------
----- ---- - -
-
--- --
----- -----
---- ---
------- ----
--
-
--- --
----- -----
---- ---
------- ----
--
--
----- ------- - -
-
----- -----
-------- -------
--------- -------------------
--
-
----- -----
-------- ------
--------- -------------------
--
-
----- -----
-------- ---------
--------- -------------------
--
--
----- ------- ------- --------------- -
------------------- -
-- -----
--------------------- ----- ------ ---
-
-------------------- -
-- ------
--------------------- ----- -------- ---
-
---------------------- -
-- ----
--------------------- ----- --------- ---
-
-------- -
------ -
---- -------------------------
----------
-----------
-----------------
-------------------------
---------------------
--
------
--
-
-
------ ------- -------------------结尾
以上就是 redux-grid-core 的一个简单教程，希望对大家有所帮助。使用这个组件库，可以在开发数据表格时省去很多重复的代码，提高开发效率。如果有不懂的地方，可以查看官方文档或通过社区寻求帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69129