前言
前端是一个给用户呈现界面与数据的关键角色，为了让用户更好地进行数据操作，表格成了不可避免的存在。Bootstrap 是一个前端框架，具有开发速度快、响应式设计等特点，其中表格组件也是被广泛使用的。但是，Bootstrap 本身并没有提供表格编辑功能，因此就有了许多优秀的第三方编辑组件，@jamest-esparter/react-bootstrap-table2-editor 就是其中一款。
介绍
@jamest-esparter/react-bootstrap-table2-editor 是基于 React 和 Bootstrap 的表格编辑组件，使用简单、轻量级、易于拓展和高度可定制。其支持单元格编辑、行编辑、添加新行、删除行、导入、导出等功能，同时还支持自定义组件、自定义编辑器等。
安装
要使用 @jamest-esparter/react-bootstrap-table2-editor 插件，需要先将其安装。在终端或命令行中输入以下命令进行安装：
npm install --save @jamest-esparter/react-bootstrap-table2-editor
使用
引入模块
在使用 @jamest-esparter/react-bootstrap-table2-editor 之前，需要事先引入相关的 React 和 Bootstrap 模块。
import React, { useState } from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
import { Editor } from '@jamest-esparter/react-bootstrap-table2-editor';构建表格
使用 @jamest-esparter/react-bootstrap-table2-editor 创建表格需要构建以下结构：
-- -------------------- ---- -------
----- ------- - ------ -- ---
----- ---- - ------ -- --
----- --------- - ------ -- ---
----- ------ -------- - --------------- -- ----
---------------
-------------
-----------
-----------------
---------------------
----------
--------
----------- -----
----- -------
--
-
--具体细节介绍：
columns：列配置，该参数为一个数组，数组中每个元素都代表表格中的一列，元素类型为{dataField: string, text: string}。其中，dataField表示列的数据源，是一个字符串类型，text表示列的标题，也是字符串类型。例如：const columns = [ {dataField: 'id', text: 'ID'}, {dataField: 'name', text: '姓名'}, {dataField: 'age', text: '年龄'} ];data：数据，该参数为一个数组，数组中每个元素都代表表格中的一行，元素类型为对象。例如：const data = [ {id: 1, name: '张三', age: 18}, {id: 2, name: '李四', age: 20}, {id: 3, name: '王五', age: 22}, {id: 4, name: '赵六', age: 26}, {id: 5, name: '钱七', age: 28} ];selectRow：选定的行，该参数为一个对象，具有以下属性：mode：行选项的模式，枚举值为none、radio、checkbox。clickToSelect：是否在单击行时选定，布尔类型。bgColor：选中行的背景颜色，字符串类型。onSelect：选中行的回调函数。onSelectAll：选中所有行的回调函数。
-- -------------------- ---- ------- ----- --------- - - ----- ----------- -------------- ----- -------- ---------- --------- ----- --------- -- - -- ------------------------ --------- ----- -- ------------ ---------- ----- -- - -- ------------- --------- ------------------- - --cellEdit：单元格编辑，该参数为一个对象，具有以下属性：blurToSave：是否在单元格失去焦点时保存修改，布尔类型。mode：编辑模式，值可以为click、dbclick或其他字符串。
cellEdit={ Editor({ blurToSave: true, mode: 'click' }) }
拓展功能
1. 自定义组件
使用 @jamest-esparter/react-bootstrap-table2-editor 创建表格时，支持自定义组件。具体方法是在列配置中加入一个 formatter 属性，该属性值为一个函数，返回要显示的组件及其属性。
例如下面这个例子中，我们为 ID 这一列的单元格添加了一个复制按钮：
-- -------------------- ---- -------
----- ------- - -
-
---------- -----
----- -----
---------- ------------- ---- -- -
------ -
-----
--------------------------
------- ----------- -- ------------------------------------
------
-
-
-
--2. 自定义编辑器
@jamest-esparter/react-bootstrap-table2-editor 支持自定义编辑器，具体方法是在列配置中加入一个 editor 属性，该属性值为一个对象，对象包含以下属性：
type：编辑器类型，可以是'input'、'textarea'、'select'。defaultValue：编辑器默认值。options：编辑器选项数组，可选，仅在编辑器类型为'select'时有用。
例如下面这个例子中，我们为「姓名」这一列的单元格添加了一个自定义的编辑器，当用户进入编辑模式时，显示自定义组件NameEditor：
-- -------------------- ---- -------
-- -------
----- ---------- - ------- -- -
----- ------ -------- - -----------------------------
----- ---------------- - --- -- ------------------------
------ ------ ----------- ------------ --------------------------- ---
--
----- ------- - -
-
---------- -------
----- -----
------- -
----- ---------
----------- ------------- -- -
----------- ---------------- --
--
------------- --
-
-
--示例代码
完整示例代码如下所示：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------------- ---- -----------------------------
------ ---------------- - ------ - ---- ---------------------------------
------ - ------ - ---- -------------------------------------------------
----- --- - -- -- -
----- ------ -------- - ----------
---- -- ----- ----- ---- ----
---- -- ----- ----- ---- ----
---- -- ----- ----- ---- ----
---- -- ----- ----- ---- ----
---- -- ----- ----- ---- ---
---
----- ------- - -
----------- ----- ----- ------
-
---------- -------
----- -----
------- -
----- ---------
----------- ------------- -- -
----------- ---------------- --
--
------------- --
-
--
----------- ------ ----- -----
--
----- --------- - -
----- -----------
-------------- -----
-------- ----------
--------- ----- --------- -- -
---------------------- -- ---- ---------
--
------------ ---------- ----- -- -
------------------------- -- --------- -----
-
--
----- ---------- - ------ -- -
------------------------------------------------- -- -
------------------------ ------
---------------- -- -
-------------------- -------
---
--
------ -
---------------- ------------- ----------- ----------------- -------
-------- -- -
--
---------- ---------------------- --
---------- ---------- --
------------- ---------- --
---------------
--------------------
-------
-----
---------
----------
--------
----------- -----
----- -------
--
-
---------------------
--
---
--
------------------
--
--
-- -----
----- --------- - ------- -- -
---- -----------------------
----------------- ---------- ---------------------- --
------
--
-- -----
----- --------- - ------- -- -
------- -------------- ------------ ----------- -- -
----- ------ - ---- ------------------------ - ----- - - - --- - -- ----- --- ---- ---
---------------------
--------------
--
-- ----
----- ------------ - ------- -- -
------- -------------- ------------ ----------- -- -
------------------
-----------------
--
-- -------
----- ---------- - ------- -- -
----- ------ -------- - -----------------------------
----- ---------------- - --- -- ------------------------
------ ------ ----------- ------------ --------------------------- ---
--
------ ------- ----总结
@jamest-esparter/react-bootstrap-table2-editor 是一个功能强大、使用简单的 React 表格编辑器组件，支持自定义组件和自定义编辑器等拓展功能，可以为使用 React 和 Bootstrap 的开发者提供高效、便捷的数据编辑体验。感谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067357890c4f7277583d67