bootstrap table使用入门基本用法

接下来我将详细讲解“bootstrap table使用入门基本用法”的完整攻略。

什么是Bootstrap Table？

Bootstrap Table是基于Bootstrap框架开发的一个表格插件，可以方便地创建美观、高度可定制的数据表格。它支持排序、分页、搜索、过滤等常见表格功能，同时也支持自定义样式、事件、单元格渲染等高级功能。

如何使用Bootstrap Table？

1. 引入Bootstrap和Bootstrap Table的CSS和JS文件

首先需要引入Bootstrap和Bootstrap Table的CSS和JS文件，在HTML文档的标签中添加如下代码：

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

1. 创建HTML表格

接着，在HTML文档中创建一个普通的HTML表格，表格内包含表头和表身两部分，例如：

<table id="my-table">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">姓名</th>
      <th data-field="age">年龄</th>
      <th data-field="gender">性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>30</td>
      <td>女</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>27</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

其中，表头部分使用

标签定义，每个

标签中的data-field属性表示该列对应的数据字段名；表身部分则使用

和

标签定义。

1. 初始化Bootstrap Table

最后，在JavaScript代码中初始化Bootstrap Table，使用以下代码：

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

其中，'#my-table'表示表格的ID。这样就完成了Bootstrap Table的基本使用，现在表格已经可以正常显示，且支持排序、分页等功能。

除此之外，Bootstrap Table还提供了一些高级功能，例如：

• 修改表格默认选项：可以通过修改bootstrapTable方法的参数，来修改表格的默认选项。例如，可以设置表格每页显示的行数为10行：

javascript
$('#my-table').bootstrapTable({
pageSize: 10
});

• 使用插件：Bootstrap Table有众多相关插件可以使用，例如可以使用toolbar插件来为表格添加一个工具栏，可以使用resizable插件来支持拖拽调整列宽等。

综上，上述就是Bootstrap Table的基本使用和一些高级功能的简单介绍。

接下来，我将演示两个示例，以便更好地理解Bootstrap Table的使用。

示例1：实现动态数据显示

<table id="dynamic-table">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">姓名</th>
      <th data-field="age">年龄</th>
      <th data-field="gender">性别</th>
    </tr>
  </thead>
</table>
<button id="add-btn">添加一行数据</button>
<script>
$(function() {
  $('#dynamic-table').bootstrapTable();
  $('#add-btn').click(function() {
    $('#dynamic-table').bootstrapTable('insertRow', {
      index: 0,
      row: {
        id: 4,
        name: '赵六',
        age: 29,
        gender: '男'
      }
    });
  });
});
</script>

上述示例中，我们创建了一个空的表格，并定义了表头。然后通过按钮的点击事件，添加了一行数据。$().bootstrapTable('insertRow', options)是Bootstrap Table提供的插入行的方法，通过配置options参数来实现插入行的操作。具体来说，options.index表示要插入的行的位置，options.row表示要插入的内容。

示例2：实现联动表格

<table id="province-table" data-url="province.json">
  <thead>
    <tr>
      <th data-field="province">省份</th>
    </tr>
  </thead>
</table>
<table id="city-table" data-url="city.json">
  <thead>
    <tr>
      <th data-field="city">城市</th>
    </tr>
  </thead>
</table>
<script>
$(function() {
  $('#province-table').bootstrapTable({
    onPostBody: function() {
      var firstRow = $('#province-table').bootstrapTable('getRowByUniqueId', 1);
      firstRow && $('#province-table').bootstrapTable('selectRow', firstRow.index);
    },
    onClickRow: function(row) {
      $('#city-table').bootstrapTable('refreshOptions', {
        queryParams: {
          province_id: row.id
        }
      }).bootstrapTable('refresh');
    }
  });
  $('#city-table').bootstrapTable({
    queryParams: function(params) {
      return {
        province_id: $('#province-table').bootstrapTable('getSelections')[0].id
      };
    }
  });
});
</script>

上述示例中，我们创建了两个表格，并分别设置了数据源URL。通过配置onPostBody事件，在第一个表格渲染完成后，模拟了点击第一行的操作。然后在第一个表格的onClickRow事件中，根据点击的行数据重新加载第二个表格的数据。同时，在第二个表格的queryParams方法中，根据第一个表格选中的数据，构造了查询参数，以实现联动显示。

以上两个示例均可以通过浏览器打开相关HTML文件实现查看。