简介
vanilla-datatables-editable 是一个基于原生 JS 的 npm 包，它能够快速地在网页中实现可编辑的表格功能。该包代码精简，易于使用和定制。本文将详细介绍如何使用该 npm 包实现可编辑表格的功能，为开发者提供指导意义。
安装
首先，在项目的根目录中打开终端，运行以下命令进行安装：
npm install --save vanilla-datatables-editable
在安装完成后，在使用拓展功能前，需要先引入样式和 JavaScript 文件。在 HTML 文件中添加如下代码：
<link rel="stylesheet" href="node_modules/vanilla-datatables-editable/dist/vanilla-dataTables-editable.css"/> <script src="node_modules/vanilla-datatables-editable/dist/vanilla-dataTables-editable.js"></script>
使用说明
首先，我们需要准备一个 HTML 表格。该表格要求有表头，以便于使用原生 JavaScript 获取表格中的列数。在表格中添加 editable 类的样式名，表示该表格可编辑：
-- -------------------- ---- -------
------ -----------------
-------
----
-------------
--------------
--------------
----------------
-----
--------
-------
----
---------- ----------
-------------------------
---------------------
------- ---- -------
-----
----
--------- ------------
--------------------------
---------------------
------- ------ -------
-----
--------
--------接下来，在 JavaScript 文件中引入如下代码：
-- -------------------- ---- -------
------ ------------------------- ---- ------------------------------
----- ------ - ---------------------------------------
---------------------------------- -- -
--- -------------------------------- -
------- ------- -- -
----------------------------------
--
---
---在代码中，我们通过 import 语句引入了 vanilla-datatables-editable 包，并获取了 class 为 editable 的所有表格元素。对于每个表格，我们将其传递给 VanillaDataTablesEditable 类，并通过 onEdit 回调函数实现在表格内容修改后输出新的数据。
可定制性
vanilla-datatables-editable 包提供了多种选项和回调函数，使得你可以随意定制你的表格：
- columns (默认值为 [])：用于设置表格列的名称。如果不设置该值，则默认使用表格中的第一行作为列名。
- dataTableOptions (默认值为 {})：用于设定 VanillaDataTables 的配置参数。可设置参数，如：
-- -------------------- ---- -------
-
------- ------
--------- -
------- ----------
------------------ ---------
--------- -
-------- --------
------- -------
------- -------
----------- ----------
--
----- -------- ------- -- ----- -- ------- --------
-
-- onEdit (默认值为 null)：当表格内容发生改变时的回调函数。
- onBeforeSave (默认值为 null)：在保存更改前触发的回调函数，可用来进行自定义验证和格式化等操作。
- onAfterSave (默认值为 null)：在保存更改后触发的回调函数。
例如，要修改表格的列名，可以将 columns 选项设置为：
columns: ['Name', 'Email', 'Phone', 'Address']
其中，columns 数组的值需要和 HTML 中表格的列数保持一致。
示例代码
在掌握了 vanilla-datatables-editable 包的使用方法后，我们可以通过以下示例代码进一步理解其实现逻辑。
HTML 代码：
-- -------------------- ---- -------
------ -----------------
-------
----
-------------
--------------
--------------
----------------
-----
--------
-------
----
---------- ----------
-------------------------
---------------------
------- ---- -------
-----
----
--------- ------------
--------------------------
---------------------
------- ------ -------
-----
--------
--------JavaScript 代码：
-- -------------------- ---- -------
------ ------------------------- ---- ------------------------------
----- ------ - ---------------------------------------
---------------------------------- -- -
--- -------------------------------- -
-------- -------- -------- -------- -----------
------- ------- -- -
----------------------------------
--
---
---通过以上示例代码，我们可以快速、简单地实现一个可编辑表格，帮助用户方便、快捷地修改和保存数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005650281e8991b448e19b1