JS组件Bootstrap Table表格行拖拽效果实现代码

Bootstrap Table是一个基于Bootstrap框架的网页表格插件，它提供了丰富的功能和灵活性，适合用于展示和处理大量数据。在Bootstrap Table中，通过行拖拽可以实现多个行的交换和排序，能够提供更方便快捷的用户体验。下面是实现Bootstrap Table表格行拖拽效果的完整攻略。

1. 安装Bootstrap Table和相关插件

首先需要在网页中引入Bootstrap Table和相关插件的库文件。可以使用下面的代码：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/extensions/bootstrap-table-draggable-row.min.js"></script>

其中，第一个link标签引入了Bootstrap Table的样式文件，第二个和第三个script标签引入了Bootstrap Table的核心库和依赖的jQuery库，第四个script标签引入了Bootstrap Table的拖拽行插件。

2. 设置行拖拽属性

在网页中创建一个Bootstrap Table表格，并设置data-drop-row="true"属性表示启用行拖拽功能。

<table id="table" data-drop-row="true">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">名称</th>
      <th data-field="price">价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>商品1</td>
      <td>10.00</td>
    </tr>
    <tr>
      <td>2</td>
      <td>商品2</td>
      <td>20.00</td>
    </tr>
    <tr>
      <td>3</td>
      <td>商品3</td>
      <td>30.00</td>
    </tr>
  </tbody>
</table>

3. 绑定拖拽事件

在jQuery的document.ready事件中，绑定Bootstrap Table的onDrag和onDrop事件。

$(document).ready(function() {
  $('#table').bootstrapTable({
    onDrag: function(row) {
      console.log('开始拖拽行：' + row.id);
    },
    onDrop: function(row, targetRow, dropPosition) {
      console.log('拖拽行：' + row.id + '，目标行：' + targetRow.id + '，位置：' + dropPosition);
    }
  });
});

在onDrag事件中，可以处理开始拖拽行的逻辑，例如记录当前行的状态和样式。在onDrop事件中，可以处理拖拽行放置到目标行的逻辑，例如实现行交换和排序操作。

示例一：交换行

下面的示例演示了如何在拖拽操作中交换两个行。

$(document).ready(function() {
  $('#table').bootstrapTable({
    onDrag: function(row) {
      console.log('开始拖拽行：' + row.id);
    },
    onDrop: function(row, targetRow, dropPosition) {
      console.log('拖拽行：' + row.id + '，目标行：' + targetRow.id + '，位置：' + dropPosition);
      var index1 = $('#table').bootstrapTable('getRowByUniqueId', row.id).index;
      var index2 = $('#table').bootstrapTable('getRowByUniqueId', targetRow.id).index;
      $('#table').bootstrapTable('swapRow', index1, index2);
    }
  });
});

在onDrop事件中，首先获取当前行和目标行的索引，然后调用Bootstrap Table的swapRow方法实现交换操作。

示例二：排序行

下面的示例演示了如何在拖拽操作中实现行的排序。

$(document).ready(function() {
  $('#table').bootstrapTable({
    onDrag: function(row) {
      console.log('开始拖拽行：' + row.id);
    },
    onDrop: function(row, targetRow, dropPosition) {
      console.log('拖拽行：' + row.id + '，目标行：' + targetRow.id + '，位置：' + dropPosition);
      var data = $('#table').bootstrapTable('getData');
      data.sort(function(a, b) {
        if (a.id == row.id && dropPosition == 'before') {
          return -1;
        } else if (b.id == row.id && dropPosition == 'after') {
          return -1;
        } else if (a.id == targetRow.id && dropPosition == 'after') {
          return 1;
        } else if (b.id == targetRow.id && dropPosition == 'before') {
          return 1;
        } else {
          return a.id - b.id;
        }
      });
      $('#table').bootstrapTable('load', data);
    }
  });
});

在onDrop事件中，首先获取表格中所有行的数据，然后根据拖拽行和目标行的ID，以及拖拽位置来进行行排序操作。最后调用Bootstrap Table的load方法，重新加载数据更新表格。