一文搞懂BootStrap table：固定列、表头、水平滚动条、垂直滚动条

2023-01-19 20:52:59

Bootstrap Table 的强大优势：轻松创建功能丰富的表格

引言

在现代网页设计中，表格扮演着至关重要的角色，它们能有效地组织和展示数据。Bootstrap Table 作为一款强大的表格插件，以其丰富的功能和易用性脱颖而出，受到广大开发者的青睐。本文将深入探究 Bootstrap Table 的优势，并指导您创建具有固定列、固定表头、水平滚动条和垂直滚动条的表格。

一、Bootstrap Table 的优势

固定列： 允许您固定特定列，即使水平滚动表格，这些列仍保持可见，便于用户比较数据。
固定表头： 在表格内容发生滚动时，表头保持固定，确保用户始终可以看到字段名称。
水平滚动条： 当表格内容超出容器宽度时，水平滚动条允许用户左右滚动以查看所有列。
垂直滚动条： 当表格行数过多时，垂直滚动条使您可以上下滚动以查看所有行。
易于定制： Bootstrap Table 提供丰富的选项和设置，允许您高度定制表格的外观和行为，以满足您的特定需求。
响应式设计： 表格可自动适应不同设备的屏幕大小，确保在所有设备上都能获得最佳的用户体验。

二、创建固定列、固定表头、水平滚动条和垂直滚动条

1. 准备工作

安装 Bootstrap 和 Bootstrap Table：npm install bootstrap --save 和 npm install bootstrap-table --save

2. 创建表格

<table id="table" data-toggle="table" data-height="300" data-fixed-columns="true" data-fixed-header="true" data-horizontal-scroll="true" data-vertical-scroll="true">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">名称</th>
      <th data-field="age">年龄</th>
      <th data-field="city">城市</th>
    </tr>
  </thead>
  <tbody>
    <!-- 数据 -->
  </tbody>
</table>

3. 初始化表格

$('#table').bootstrapTable();

4. 添加数据

$('#table').bootstrapTable('load', data);

5. 示例代码

<!DOCTYPE html>
<html>
  <head>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap-table/bootstrap-table.min.js"></script>
  </head>
  <body>
    <table id="table" data-toggle="table" data-height="300" data-fixed-columns="true" data-fixed-header="true" data-horizontal-scroll="true" data-vertical-scroll="true">
      <thead>
        <tr>
          <th data-field="id">ID</th>
          <th data-field="name">名称</th>
          <th data-field="age">年龄</th>
          <th data-field="city">城市</th>
        </tr>
      </thead>
      <tbody>
        <!-- 数据 -->
      </tbody>
    </table>
    <script>
      $('#table').bootstrapTable();
      $('#table').bootstrapTable('load', data);
    </script>
  </body>
</html>