3分钟搞定表格列拖动：Bootstrap Table reorder-columns 扩展全攻略

3分钟搞定表格列拖动：Bootstrap Table reorder-columns 扩展全攻略

【免费下载链接】bootstrap-table wenzhixin/bootstrap-table: 是一个基于 Bootstrap 的表格插件，它没有使用数据库。适合用于数据展示，特别是对于需要使用 Bootstrap 和表格展示的场景。特点是表格插件、Bootstrap、无数据库。 项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-table

你是否还在为表格列顺序固定不变而烦恼？客户要求"把销售额列移到前面"却要改代码？Bootstrap Table的reorder-columns扩展让列拖动排序变得像拖放文件一样简单！本文将带你从零实现可拖拽的交互表格，读完就能掌握3种配置方式、5个实用技巧和2个企业级场景方案。

为什么需要列拖动排序？

在数据展示场景中，不同用户关注的列字段往往不同：

• 财务人员优先看金额列
• 运营人员关注日期和状态列
• 管理层需要汇总数据列前置

传统解决方案需要开发人员修改代码或配置文件，而reorder-columns扩展通过直观的拖拽操作，让用户可以自定义表格布局。该扩展源码位于src/extensions/reorder-columns/bootstrap-table-reorder-columns.js，采用MIT协议完全开源。

快速开始：3步实现列拖动

1. 引入必要资源

首先需要在页面中引入Bootstrap Table核心文件和reorder-columns扩展：

<!-- 引入Bootstrap样式 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
<!-- 引入Bootstrap Table样式 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.21.4/bootstrap-table.min.css">

<!-- 引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<!-- 引入Bootstrap Table核心JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.21.4/bootstrap-table.min.js"></script>
<!-- 引入reorder-columns扩展 -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.21.4/extensions/reorder-columns/bootstrap-table-reorder-columns.min.js"></script>

2. 创建基础表格

在HTML中定义表格结构，添加data-toggle="table"和必要的列定义：

<table id="myTable" class="table table-striped">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">名称</th>
      <th data-field="price">价格</th>
      <th data-field="date">日期</th>
    </tr>
  </thead>
</table>

3. 启用列拖动功能

通过JavaScript初始化表格时，添加reorderableColumns: true配置：

$('#myTable').bootstrapTable({
  data: [
    { id: 1, name: '产品A', price: '¥199', date: '2023-01-15' },
    { id: 2, name: '产品B', price: '¥299', date: '2023-02-20' },
    { id: 3, name: '产品C', price: '¥399', date: '2023-03-10' }
  ],
  reorderableColumns: true,  // 启用列拖动排序
  maxMovingRows: 10,         // 最大可移动行数
  dragaccept: null           // 允许拖动的列选择器，默认所有列
});

核心配置项详解

reorder-columns扩展提供了3个关键配置项，通过它们可以精确控制列拖动行为：

配置项	类型	默认值	说明
reorderableColumns	Boolean	false	是否启用列拖动功能
maxMovingRows	Number	10	拖动时最多显示的移动行数
dragaccept	String	null	允许拖动的列选择器，如".draggable-column"

例如，要仅允许价格和日期列拖动，可以这样配置：

$('#myTable').bootstrapTable({
  // ...其他配置
  reorderableColumns: true,
  dragaccept: '[data-field="price"],[data-field="date"]'
});

事件与回调函数

当列拖动完成后，reorder-columns会触发reorder-column.bs.table事件，你可以通过该事件获取新的列顺序：

$('#myTable').on('reorder-column.bs.table', function (e, fields) {
  console.log('新的列顺序:', fields);  // 输出类似: ["id", "price", "name", "date"]
  
  // 这里可以保存列顺序到本地存储
  localStorage.setItem('tableColumnOrder', JSON.stringify(fields));
});

如果你需要在初始化表格时恢复保存的列顺序，可以使用orderColumns方法：

// 从本地存储获取保存的列顺序
const savedOrder = JSON.parse(localStorage.getItem('tableColumnOrder'));

if (savedOrder) {
  $('#myTable').bootstrapTable('orderColumns', savedOrder);
}

高级应用场景

结合Cookie扩展保存列顺序

Bootstrap Table提供了cookie扩展，可以自动将表格状态保存到Cookie中。结合reorder-columns使用，只需添加cookie: true配置：

$('#myTable').bootstrapTable({
  // ...其他配置
  reorderableColumns: true,
  cookie: true,                // 启用Cookie保存
  cookieIdTable: 'myTableId'   // 唯一标识，避免多个表格冲突
});

限制特定列不可拖动

通过dragaccept配置可以实现某些列不可拖动，但有时我们需要更灵活的控制。可以通过CSS隐藏特定列的拖动手柄：

/* 隐藏ID列的拖动手柄 */
th[data-field="id"] .th-inner {
  cursor: default !important;
  user-select: none;
}

常见问题解决

Q: 拖动列后表格样式错乱怎么办？

A: 这通常是因为表格使用了复杂的自定义样式。可以在拖动完成后调用resetView方法重置表格布局：

$('#myTable').on('reorder-column.bs.table', function () {
  $(this).bootstrapTable('resetView');
});

Q: 如何禁止在移动设备上使用列拖动？

A: 可以通过检测设备类型动态启用/禁用功能：

const isMobile = window.innerWidth < 768;

$('#myTable').bootstrapTable({
  reorderableColumns: !isMobile
  // ...其他配置
});

浏览器兼容性

reorder-columns扩展基于原生JavaScript实现，兼容所有现代浏览器。对于IE9及以下浏览器，需要引入ES5 shim以支持Object.assign等方法。

总结

reorder-columns扩展为Bootstrap Table带来了直观的列拖动功能，只需简单配置就能显著提升用户体验。核心要点包括：

1. 通过reorderableColumns: true启用基本功能
2. 使用dragaccept控制允许拖动的列
3. 通过reorder-column事件获取列顺序变化
4. 结合本地存储或Cookie扩展保存用户自定义顺序

该扩展源码位于src/extensions/reorder-columns/bootstrap-table-reorder-columns.js，欢迎贡献代码或提出改进建议。

如果您在使用过程中遇到问题，可以查阅官方文档或在GitHub上提交issue。

提示：Bootstrap Table还有固定列、导出等实用扩展，配合使用能打造更强大的数据表格。

【免费下载链接】bootstrap-table wenzhixin/bootstrap-table: 是一个基于 Bootstrap 的表格插件，它没有使用数据库。适合用于数据展示，特别是对于需要使用 Bootstrap 和表格展示的场景。特点是表格插件、Bootstrap、无数据库。 项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-table