bootstrap-table 表内行拖放所需js/css及实例

Bootstrap Table 是一个流行的开源项目，它为HTML表格提供了丰富的功能，包括行拖放、排序、分页、过滤等。在本篇文章中，我们将深入探讨如何实现Bootstrap Table的行拖放功能，以及涉及到的相关JavaScript（js）和CSS（css）文件，同时会提供一个基本实例，并讨论如何将拖放排序的结果保存到数据库。 为了实现Bootstrap Table的行拖放功能，你需要引入以下关键库： 1. Bootstrap CSS：这是Bootstrap框架的基础，提供了样式和布局的支持。 2. Bootstrap JS：包含了Bootstrap的一些交互组件，如模态框、下拉菜单等。 3. Bootstrap Table CSS和JS：这是Bootstrap Table的核心，提供了表格的各种功能。 4. jQuery：Bootstrap Table依赖jQuery来处理DOM操作和事件。 5. jQuery UI或Sortable JS：用于实现拖放功能。 具体引入方式如下： ```html <!-- CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css"> <!-- JS --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <!-- 或者Sortable JS --> ``` 接下来，创建一个基本的Bootstrap Table，添加`data-draggable`属性以启用行拖放功能： ```html <table id="table" data-toggle="table" data-draggable="true"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">Name</th> <th data-field="price">Price</th> </tr> </thead> <tbody> <!-- 表格数据行 --> </tbody> </table> ``` 然后，你需要编写JavaScript代码来处理拖放事件并更新表格顺序。这里可以使用jQuery UI的`sortable()`方法或者Sortable JS库。以下是一个使用jQuery UI的例子： ```javascript $(function () { $('#table').DataTable().columns().order('none').draw(); $('#table tbody').sortable({ update: function (event, ui) { var newOrder = []; $(this).find('tr').each(function (index) { var rowId = $(this).data('id'); newOrder.push(rowId); }); // 保存新顺序到服务器 saveNewOrderToServer(newOrder); } }); }); ``` `saveNewOrderToServer(newOrder)`是假设的一个函数，实际应用中你需要实现这个方法，将`newOrder`数组通过Ajax发送到后端服务器，保存新的行顺序到数据库。 在服务器端，根据接收到的新顺序更新数据库中对应记录的顺序字段，通常是一个整数字段，表示行的相对位置。 关于注意事项，确保所有依赖库正确加载且版本兼容，避免出现冲突。此外，拖放排序功能可能与表格的其他交互功能（如筛选、排序）存在潜在问题，需要进行充分测试以确保用户体验。 Bootstrap Table的行拖放功能结合了前端和后端的技术，通过引入必要的库、设置属性和编写JavaScript代码，可以实现用户友好的交互。同时，需要注意与数据库的交互，以持久化用户的排序操作。在实际项目中，还要关注性能优化和兼容性问题，以提供稳定可靠的服务。