Bootstrap Table的使用总结

Bootstrap Table是一个基于Bootstrap的jQuery插件，它可以将一个普通的HTML表格转化成一个功能丰富的高级表格，支持分页、排序、搜索、多选等功能。在前端开发中，Bootstrap Table常常被用来展示比较复杂的数据集，它简单易用，功能强大，可以大大提升用户体验。

安装

要使用Bootstrap Table，首先需要下载并引入相关的CSS和JS文件。可以将它们放置在本地，也可以直接引用在线资源。以下是使用CDN引用的示例：

<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-table/1.16.0/bootstrap-table.min.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>

基本用法

使用Bootstrap Table非常简单，只需要在HTML中创建一个表格，然后通过JavaScript调用bootstrapTable()方法即可。以下是一个基本示例：

<table id="myTable">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Name</th>
      <th data-field="price">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Bootstrap Table</td>
      <td>100</td>
    </tr>
    <tr>
      <td>2</td>
      <td>jQuery</td>
      <td>50</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bootstrap</td>
      <td>80</td>
    </tr>
  </tbody>
</table>

<script>
  $(function() {
    $('#myTable').bootstrapTable();
  });
</script>

在上面的示例中，我们创建了一个表格，包含3列和3行数据。通过jQuery的选择器找到这个表格元素，并调用bootstrapTable()方法，即可将它转化成一个Bootstrap Table。页面上会出现一个带有分页、排序等功能的高级表格，同时也支持一些自定义配置，如下：

$('#myTable').bootstrapTable({
  pagination: true,        // 是否显示分页（默认为false）
  search: true,            // 是否显示搜索框（默认为false）
  showColumns: true,       // 是否显示列选择（默认为false）
  showToggle: true,        // 是否显示切换视图按钮（默认为false）
  toolbar: '#toolbar',     // 自定义工具栏
  columns: [{
    field: 'id',
    title: 'ID'
  }, {
    field: 'name',
    title: 'Name'
  }, {
    field: 'price',
    title: 'Price'
  }]
});

其中pagination、search、showColumns、showToggle等属性用于控制表格显示的功能，toolbar用于自定义工具栏，columns用于设置表格列的字段名和标题。

示例说明

示例1：从JSON数据中加载

如果需要从JSON数据中加载表格，可以使用data选项指定数据源，如下：

var jsonData = [{
  id: 1,
  name: 'Bootstrap Table',
  price: 100
}, {
  id: 2,
  name: 'jQuery',
  price: 50
}, {
  id: 3,
  name: 'Bootstrap',
  price: 80
}];

$('#myTable').bootstrapTable({
  data: jsonData,
  pagination: true,
  search: true,
  showColumns: true,
  showToggle: true,
  columns: [{
    field: 'id',
    title: 'ID'
  }, {
    field: 'name',
    title: 'Name'
  }, {
    field: 'price',
    title: 'Price'
  }]
});

在上面的示例中，我们使用data选项指定了JSON数据源，并将其作为参数传递给bootstrapTable()方法。表格将会在页面上渲染出来，并显示分页、搜索等控件。

示例2：使用AJAX动态加载数据

如果需要使用AJAX动态加载表格数据，可以使用url选项指定数据接口的URL，如下：

$('#myTable').bootstrapTable({
  url: '/api/getData',
  pagination: true,
  search: true,
  showColumns: true,
  showToggle: true,
  columns: [{
    field: 'id',
    title: 'ID'
  }, {
    field: 'name',
    title: 'Name'
  }, {
    field: 'price',
    title: 'Price'
  }]
});

在上面的示例中，在初始化表格时指定了数据接口的URL为/api/getData，Bootstrap Table会自动向该URL发送AJAX请求，并根据返回的JSON数据渲染表格。由于使用AJAX加载数据是异步的，因此需要确保表格初始化时数据已经准备好并加载完成。

总结

Bootstrap Table是一个高度灵活、易于使用、功能强大的jQuery插件，它可以将一个普通的HTML表格转化成一个功能丰富的高级表格，支持分页、排序、搜索、多选等功能。在实际项目中，我们可以根据具体情况使用Bootstrap Table，从而提升用户体验和开发效率。