前言
datatable 是一个非常实用的前端表格库，可以在网页上创建可交互的、可排序、可过滤的表格，而 datatables.net-rowreorder-bs 是 datatable 的一个扩展库，可以在表格中增加行重新排序的功能，使用户可以方便地对表格中的行进行拖拽排序和重新排列。本文将为大家介绍 datatables.net-rowreorder-bs 库的使用方法，包括安装、配置和使用示例。
安装
1. npm 安装
使用 npm 安装 datatables.net-rowreorder-bs 是最常用的方式，您可以直接在终端中运行以下命令：
npm install datatables.net-rowreorder-bs --save
2. 直接引用
另外，您还可以通过直接引用方式将 datatables.net-rowreorder-bs 库引入您的 html 页面中：
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.7/css/rowReorder.bootstrap.min.css"> <script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.2.7/js/dataTables.rowReorder.min.js"></script>
配置
在开始使用 datatables.net-rowreorder-bs 前，我们需要进行一些配置和初始化。首先，需要引用必要的 css 和 js 文件：
<!-- 引用 datatables 的样式文件 --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"> <!-- 引入 datatables.js --> <script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script> <!-- 引入 datatables.net-rowreorder-bs 扩展库的样式文件 --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.7/css/rowReorder.bootstrap.min.css"> <!-- 引入 datatables.net-rowreorder-bs 扩展库的 js 文件 --> <script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.2.7/js/dataTables.rowReorder.min.js"></script>
接下来，我们需要在 table 上调用 dataTable() 方法进行初始化，并在其中设置相关的参数：
-- -------------------- ---- -------
-------------------------
----------- -
--------- ----------------
--
----------- -----
----------- -
- ------------------- -- -------- - --
- ------------------- -- -------- -- -
-
---其中，rowReorder 参数是用来启用 datatables.net-rowreorder-bs 扩展库的功能，并设置相关参数的。在您的表格中，您可以指定拖拽排序的区域为表格的某一列或单元格，在上面设置 selector 参数即可。
除此之外，您还可以使用其他参数来配置表格，如 responsive 参数可以使表格自动适应屏幕大小。
使用示例
下面是一个简单的 datatables.net-rowreorder-bs 的使用示例，您可以参考并按照以上步骤进行操作：
-- -------------------- ---- -------
--------- -----
------
------
---- -- ---------- ----- ---
----- ---------------- --------------- ------------------------------------------------------------------------
---- -- ------------- ---
------- ---------------------- ------------------------------------------------------------------------------
---- -- ---------------------------- -------- ---
----- ---------------- --------------- ------------------------------------------------------------------------------------
---- -- ---------------------------- ---- -- -- ---
------- ---------------------- -------------------------------------------------------------------------------------------
-------
------
------ ------------ ----------------
-------
----
-------------
-----------------
---------------
------------
--------- ---------
---------------
-----
--------
-------
----
--------- ----------
---------- --------------
------------------
-----------
-------------------
-----------------
-----
----
----------- ------------
-------------------
--------------
-----------
-------------------
-----------------
-----
----
---------- --------
---------- --------- -----------
------- --------------
-----------
-------------------
----------------
-----
----
---------- ----------
---------- ---------- --------------
------------------
-----------
-------------------
-----------------
-----
----
-------- ----------
-------------------
--------------
-----------
-------------------
-----------------
-----
----
----------- ---------------
--------------- ---------------
------- ---------
-----------
-------------------
-----------------
-----
----
---------- -------------
--------- --------------
------- --------------
-----------
-------------------
-----------------
-----
----
--------- -------------
--------------- ---------------
--------------
-----------
-------------------
-----------------
-----
----
----------- ----------
-------------- --------------
------- --------------
-----------
-------------------
-----------------
-----
----
--------- ----------
------------ -------------
------------------
-----------
-------------------
-----------------
-----
----
-------- -----------
---------- ------------
---------------
-----------
-------------------
----------------
-----
----
--------- ----------
----------- ---------
------------------
-----------
-------------------
-----------------
-----
----
---------- -------------
------------ -------------
------- --------------
-----------
-------------------
-----------------
-----
----
--------- ------------
---------- --------- -------------
---------------
-----------
-------------------
-----------------
-----
----
----------- ----------------
------------ -------------
---------------
-----------
-------------------
-----------------
-----
----
----------- ----------
------------- -------------
---------------
-----------
-------------------
-----------------
-----
----
-------- ---------
--------- --------- ------- ----------
------- ---------
-----------
-------------------
-----------------
-----
----
---------- -----------
----------- ------------------
------- ---------
-----------
-------------------
-----------------
-----
----
----------- ----------
------------ -------------
---------------
-----------
-------------------
-----------------
-----
----
------- ---------
------------- ---------
------------------
-----------
-------------------
-----------------
-----
--------
--------
------- -----------------------
---------------------------- -
-------------------------
----------- -
--------- ----------------
--
----------- -----
----------- -
- ------------------- -- -------- - --
- ------------------- -- -------- -- -
-
---
---
---------
-------
-------总结
本文为大家介绍了 datatables.net-rowreorder-bs 的使用方法，包括安装、配置和使用示例。虽然这只是一个简单的示例，但通过本文的指导，相信大家已经能使用 datatables.net-rowreorder-bs 扩展库在自己的项目中方便地实现行级别的拖拽排序和重新排列。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/185721