介绍
datatables.net-editor-jqui 是使用 jQuiery UI 的 datatables.net 插件，用于在 Web 应用中创建可编辑表格的 npm 包。
该 npm 包的使用方式比较简单，但如果想要深入了解其使用方法以及更加灵活地使用 datatables.net-editor-jqui，就需要对 datatables.net 和 jQuiery UI 有一定的了解。
本文将重点讲解如何使用 datatables.net-editor-jqui 进行表格数据编辑、添加、删除等操作，同时也会介绍一些运用 jQuiery UI 和 datatables.net 的技巧。
开始使用
第一步是安装该 npm 包，使用以下命令：
npm install datatables.net-editor-jqui --save
需要注意的是， datatables.net-editor-jqui 的使用依赖 datatables.net 和 jQuiery UI。因此，在使用该 npm 包之前需要先安装这两个包。
安装完成后，在 Web 应用中引入 datatables.net-editor-jqui 的 JS 和 CSS 文件：
<head>
<link rel="stylesheet" href="path/to/dataTables.editor.jqueryui.css" />
<script src="path/to/jquery.js"></script>
<script src="path/to/jquery-ui.js"></script>
<script src="path/to/jquery.dataTables.js"></script>
<script src="path/to/dataTables.editor.jqueryui.js"></script>
</head>以上文件路径需要根据实际情况进行修改。
创建可编辑表格
创建一个可以编辑的表格需要先创建一个表格对象，可以用以下代码实现：
-- -------------------- ---- -------
--- ------ - --- -----------------------
----- ---------------------------------------
------ ----------- -- ----- --- -- --
------- -
- ------ ----- ----- ------ --
- ------ ----- ----- ----- --
- ------ ----- ----- -------- --
- ----- ----------- ------ ------- ----- -------- -
-
---以上代码首先调用了 datatables.net-editor-jqui 的构造函数创建了一个可编辑的表格编辑器 editor，然后设置了表格的 AJAX 数据源地址（ajax）、表格所在的 DOM 元素 ID（table）以及各单元格列的数据列名、标签名以及表单控件类型等基本信息（fields）。
最后需要调用以下代码，根据之前创建的表格对象 editor 来创建表格控件：
-- -------------------- ---- -------
-------------------------
----- ---------------------------------------
-------- -
- ----- ---- --
- ----- ------ --
- ----- ----- --
- ----- -------- --
- ----- -------- -
--
---- ---------------------------
-------- -
- ------- --------- ------- ------ --
- ------- ------- ------- ------ --
- ------- --------- ------- ------ -
-
---进行表格数据编辑
创建表格编辑器和表格控件后，就可以对表格中的数据进行编辑了。点击表格中的单元格，就会出现一个编辑框，允许进行数据的编辑和修改。
每个单元格的编辑框中都会显示默认的表单控件类型，但可以根据需要自行根据实际情况修改该默认值。 例如，以下代码可以将第 4 列的表单控件类型修改为日期选择器：
editor.field('salary').def(0).setFormatter(function (val) {
return val ? val : '0.00';
}).getFormatter(function (val) {
return val ? parseFloat(val) : 0;
}).input({ type: 'datetime', dateFormat: 'yy-mm-dd' });以上代码设置了在第 4 列（salary）中的表单控件类型为日期选择器，并设置了日期格式为"yy-mm-dd"。
添加和删除表格数据
除了编辑表格数据外，datatables.net-editor-jqui 还支持向表格中添加和删除数据条目，以下示例代码展示了如何进行添加和删除操作：
-- -------------------- ---- -------
---------------------- -------- ------ ------- -
-- ------- --- -------- -- ------ --- ------- -
--------------- - ------------- - --- ----------------- -- ------- --
-
---
------------------------- ------ ---- -------- -- -
------------------- -
-------- - ------ ------- --- -------- -- - --------------- - -
---
---
------------------------- ------------------ -------- --- -
-------------------
------------------------------------ -
------ -------
-------- --------------
-------- ------ -----
---
---以上代码是在表格控件上加入了添加和删除按钮，在添加按钮上单击会打开一个行编辑器并在数据后添加一行，而删除按钮将会弹出一个确认框来确认是否删除该行。 还有一点需要注意的是， datatables.net-editor-jqui 默认添加新数据使用 PUT 操作，而不是 POST 操作，这可能会导致某些服务端框架上的问题。如果使用 PHP 和 Laravel 框架，请在服务端代码中添加以下代码将 PUT 操作转换为 POST 操作：
if (isset($_SERVER['HTTP_X_HTTP_METHOD_OVERRIDE']) && $_SERVER['HTTP_X_HTTP_METHOD_OVERRIDE'] === 'PUT') {
$_POST = array_merge($_POST, $_GET);
}总结
本文详细介绍了如何使用 npm 包 datatables.net-editor-jqui，实现表格数据的编辑、添加和删除等操作。同时还介绍了运用 jQuiery UI 和 datatables.net 的技巧，希望能够对初学者理解和掌握这些知识有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055da781e8991b448db68b