Bootstrap Table 列宽可拖拽调整教程-html教程-PHP中文网

Bootstrap Table 列宽可拖拽调整教程

本文详细讲解如何在 bootstrap table 中启用列宽可拖拽功能，涵盖依赖引入、html 结构配置、初始化代码及关键注意事项，帮助开发者快速实现响应式、用户友好的表格列宽自定义体验。

本文详细讲解如何在 bootstrap table 中启用列宽可拖拽功能，涵盖依赖引入、html 结构配置、初始化代码及关键注意事项，帮助开发者快速实现响应式、用户友好的表格列宽自定义体验。

Bootstrap Table 官方扩展 resizable 提供了原生、轻量且与框架深度集成的列宽拖拽能力——无需第三方布局库（如 split.js），仅需正确引入资源并设置属性即可生效。以下是完整、可直接运行的实践指南。

✅ 必要依赖引入

需按顺序加载以下资源（推荐使用 CDN）：

基础样式：Bootstrap CSS（v5.3+）、Bootstrap Table CSS
核心脚本：jQuery（≥3.6）、Bootstrap Bundle JS、Bootstrap Table JS
关键扩展：jquery.resizableColumns.min.js + bootstrap-table-resizable.min.js

<!-- 样式 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.10/dist/bootstrap-table.min.css" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/jquery.resizableColumns@0.3.0/dist/jquery.resizableColumns.min.css" rel="stylesheet"><!-- 脚本（注意顺序） --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.10/dist/bootstrap-table.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery.resizableColumns@0.3.0/dist/jquery.resizableColumns.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.10/dist/extensions/resizable/bootstrap-table-resizable.min.js"></script>

⚠️ 注意：jquery.resizableColumns.min.js 必须在 bootstrap-table.min.js 之后、bootstrap-table-resizable.min.js 之前加载；否则扩展无法注册。

✅ HTML 表格结构与属性配置

在 <table> 标签中添加 <code>data-resizable="true" 启用该功能，并确保 thead > tr > th 具备明确的 data-field 属性（与后端数据字段或本地 data 数组键名一致）：

data-show-columns="true" data-search="true" data-show-toggle="true" data-pagination="true" data-url="json/data1.json">

ID	Item Name	Item Price

? 提示：建议为各列设置初始 data-width（单位为像素），提升首次渲染体验和拖拽基准感。

✅ 初始化表格

使用 jQuery 在 DOM 加载完成后调用 .bootstrapTable()：

Bootstrap

Bootstrap 5.3.8 编译版包含可直接用于项目的 CSS、JavaScript 和插件文件，适合快速搭建响应式网页。

下载

<script>
  $(function() {
    $('#table').bootstrapTable({
      // 可选：进一步配置 resizable 行为（见下方说明）
      onPostBody: function() {
        // 可在此处监听重绘后逻辑（如适配自定义表头）
      }
    });
  });
</script>

? 高级控制（可选）

bootstrap-table-resizable 支持通过 data-resizable-options 传入配置对象，例如禁用最小宽度限制或自定义句柄样式：

常用选项：

minWidth: 列最小允许宽度（默认 30）
resizeFromBody: 是否根据 <tbody> 内容自动调整列宽（默认 <code>true，设为 false 可提升固定列场景稳定性）
handleClass: 自定义拖拽句柄 CSS 类名

✅ 注意事项与常见问题

❌ 不支持 card-view 模式下启用 resizable；请确保使用标准表格视图。
❌ 动态列（如 columns 通过 JS 传入）需在初始化前确保 data-resizable="true" 已存在，或调用 refreshOptions({ resizable: true })。
✅ 拖拽状态会自动保存至浏览器 localStorage（基于 table ID），刷新后列宽记忆有效（需开启 data-resizable-storage="true"）。
? 所有现代浏览器（Chrome/Firefox/Edge/Safari ≥15）均兼容，移动端暂不支持拖拽操作（建议配合 responsive-table 或 mobile-responsive 扩展优化小屏体验）。