值得分享的轻量级Bootstrap Table表格插件

当谈及Bootstrap表格插件时，Bootstrap Table通常是前端开发者们的首选。Bootstrap Table是一款高度可定制性和轻量级的Bootstrap表格插件。本文将提供关于如何使用Bootstrap Table插件的完整攻略，介绍如何配置和使用Bootstrap表格，如何添加分页器和搜索器，以及如何处理表单提交。

安装和使用Bootstrap Table

1. 引入Bootstrap Table的必要文件

<!-- jQuery和Bootstrap的CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 最新的jQuery文件 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap的JavaScript文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap Table的CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.css">
<!-- Bootstrap Table的JavaScript文件 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>

2. 创建表格HTML代码

<table id="table" data-toggle="table" data-url="data.json" data-pagination="true" data-search="true">
  <thead>
    <tr>
      <th data-field="id">#</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

在示例中，我们创建一个带分页器和搜索器的表格，表格数据来源于data.json文件。

3. 初始化表格

$(function() {
  $('#table').bootstrapTable();
});

我们使用jQuery的$(document).ready()函数来初始化表格。

配置Bootstrap Table

我们可以配置Bootstrap Table插件来改变表格的样式、行为以及功能。

1. 更改表格的样式

<table id="table" data-toggle="table" class="table table-striped table-bordered" data-url="data.json" data-pagination="true" data-search="true">
  <thead>
    <tr>
      <th data-field="id">#</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

添加了class="table table-striped table-bordered"的属性，为表格添加了striped和bordered样式。

2. 添加搜索器

<table id="table" data-toggle="table" class="table table-striped table-bordered" data-url="data.json" data-pagination="true" data-search="true">
  <thead>
    <tr>
      <th data-field="id">#</th>
      <th data-field="name" data-sortable="true">Item Name</th>
      <th data-field="price" data-sortable="true">Item Price</th>
    </tr>
  </thead>
</table>

添加了data-search="true"的属性，为表格添加了搜索器。

3. 添加分页器

<table id="table" data-toggle="table" class="table table-striped table-bordered" data-url="data.json" data-pagination="true" data-search="true">
  <thead>
    <tr>
      <th data-field="id">#</th>
      <th data-field="name" data-sortable="true">Item Name</th>
      <th data-field="price" data-sortable="true">Item Price</th>
    </tr>
  </thead>
</table>

添加了data-pagination="true"的属性，为表格添加了分页器。

使用Bootstrap Table

1. 表格的CRUD操作

<table id="table" data-toggle="table" class="table table-striped table-bordered" data-url="data.json" data-pagination="true" data-search="true">
  <thead>
    <tr>
      <th data-field="id">#</th>
      <th data-field="name" data-sortable="true">Item Name</th>
      <th data-field="price" data-sortable="true">Item Price</th>
      <th data-formatter="operateFormatter" data-events="operateEvents">Actions</th>
    </tr>
  </thead>
</table>

在示例中，我们在表格中添加了操作列。operateFormatter函数用来格式化操作列，operateEvents对象用来处理操作列的按钮点击事件。

2. 表格的扩展功能

<table id="table" data-toggle="table" class="table table-striped table-bordered" data-url="data.json" data-pagination="true" data-search="true" data-show-export="true">
  <thead>
    <tr>
      <th data-field="id">#</th>
      <th data-field="name" data-sortable="true">Item Name</th>
      <th data-field="price" data-sortable="true">Item Price</th>
    </tr>
  </thead>
</table>

添加了data-show-export="true"的属性，为表格添加了导出数据的功能。

示例说明

示例1：使用Bootstrap Table制作一个简单的表格

<table id="table" data-toggle="table" class="table table-striped">
  <thead>
    <tr>
      <th data-field="name">Name</th>
      <th data-field="username">Username</th>
      <th data-field="email">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>zhangsan</td>
      <td>[e-mail]</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>lisi</td>
      <td>[e-mail]</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>wangwu</td>
      <td>[e-mail]</td>
    </tr>
  </tbody>
</table>

示例2：使用Bootstrap Table添加一个可以编辑的表格

<table id="table" data-toggle="table" class="table table-striped">
  <thead>
    <tr>
      <th data-field="name">Name</th>
      <th data-field="username">Username</th>
      <th data-field="email">Email</th>
      <th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td contenteditable="true">张三</td>
      <td contenteditable="true">zhangsan</td>
      <td contenteditable="true">[e-mail]</td>
      <td><a class="edit">修改</a> <a class="remove">删除</a></td>
    </tr>
    <tr>
      <td contenteditable="true">李四</td>
      <td contenteditable="true">lisi</td>
      <td contenteditable="true">[e-mail]</td>
      <td><a class="edit">修改</a> <a class="remove">删除</a></td>
    </tr>
    <tr>
      <td contenteditable="true">王五</td>
      <td contenteditable="true">wangwu</td>
      <td contenteditable="true">[e-mail]</td>
      <td><a class="edit">修改</a> <a class="remove">删除</a></td>
    </tr>
  </tbody>
</table>

<script>
$(function() {
  $('#table').bootstrapTable();

  window.operateEvents = {
    'click .edit': function (e, value, row, index) {
      // 修改操作
    },
    'click .remove': function (e, value, row, index) {
      // 删除操作
    }
  };

  function operateFormatter(value, row, index) {
    return [
      '<a class="edit" href="javascript:void(0)">修改</a>',
      '<a class="remove" href="javascript:void(0)">删除</a>'
    ].join('');
  }
});
</script>

在示例中，我们添加了可以实现编辑、删除功能的表格。operateFormatter函数用来格式化操作列，operateEvents对象用来处理操作列的按钮点击事件。