Bootstrap table的使用方法

以下是关于Bootstrap table的使用方法的完整攻略。

Bootstrap table是什么？

Bootstrap table是一个基于Bootstrap开发的强大的表格插件，提供了丰富的功能和定制选项，使得开发人员可以快速创建高度定制化的表格。

如何引入Bootstrap table？

在使用Bootstrap table之前，我们需要先引入Bootstrap和jQuery，并下载Bootstrap table的相关文件，包括CSS和JS文件。我们可以使用链接引入这些文件，也可以直接下载到本地然后引用。

引入CSS和JS文件的代码示例：

<!-- 引入Bootstrap CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- 引入Bootstrap table CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.css">

<!-- 引入jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<!-- 引入Bootstrap JS文件 -->
<script src="https://cdn.bootcss.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<!-- 引入Bootstrap table JS文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>

Bootstrap table基本使用方法

初始化表格

在HTML文件中，我们可以通过一个空的table标签来初始化一个空的表格，并为其指定一个唯一的ID。在JS文件中，我们可以使用$('#table-id').bootstrapTable()来初始化表格。

<table id="table-id"></table>

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

填充数据

Bootstrap table支持多种填充数据的方式，包括静态数据、JSON数据、AJAX数据、本地数据等。我们可以通过指定data选项或url选项来指定数据源，还可以通过ajax选项来设置ajax请求的参数。

填充静态数据

我们可以使用data选项来指定表格中的静态数据。如下代码示例：

var data = [
  {
    "id": 1,
    "name": "张三",
    "age": 20
  },
  {
    "id": 2,
    "name": "李四",
    "age": 21
  },
  {
    "id": 3,
    "name": "王五",
    "age": 22
  }
];

$('#table-id').bootstrapTable({
  data: data
});

填充JSON数据

如果我们的数据源是一个JSON文件或通过后台生成的JSON数据，我们可以使用url选项来指定JSON数据的路径。如下代码示例：

$('#table-id').bootstrapTable({
  url: 'data.json'
});

填充AJAX数据

如果我们的数据源是一个通过AJAX请求返回的JSON数据，我们需要使用ajax选项来实现。如下代码示例：

$('#table-id').bootstrapTable({
  ajax: function (request) {
    $.ajax({
      type: 'GET',
      url: 'data.json',
      dataType: 'json',
      success: function (res) {
        request.success(res);
      },
      error: function () {
        request.error();
      }
    });
  }
});

填充本地数据

如果我们在本地生成数据而不是通过后台或AJAX请求获取数据，我们可以使用load和append方法来添加数据。load方法会替换表格中的所有数据，而append方法会在表格中添加新的数据。如下代码示例：

var data = [
  {
    "id": 1,
    "name": "张三",
    "age": 20
  },
  {
    "id": 2,
    "name": "李四",
    "age": 21
  },
  {
    "id": 3,
    "name": "王五",
    "age": 22
  }
];

$('#table-id').bootstrapTable('load', data); // 替换所有数据
$('#table-id').bootstrapTable('append', data); // 添加新数据

设置表格列

通过设置columns选项，我们可以定义表格的列数、列名称、数据类型等。如下代码示例：

$('#table-id').bootstrapTable({
  columns: [
    {
      field: 'id',
      title: 'ID'
    },
    {
      field: 'name',
      title: '姓名'
    },
    {
      field: 'age',
      title: '年龄'
    }
  ]
});

设置表格样式

Bootstrap table提供了多样的表格样式和主题，我们可以使用classes选项或bootstrap样式类来设置表格的外观样式。如下代码示例：

$('#table-id').bootstrapTable({
  classes: 'table-bordered table-hover',
  theadClasses: 'bg-primary',
  striped: true
});

设置表格事件

Bootstrap table提供了多种事件处理方法，我们可以使用jQuery方法来绑定和处理表格事件。如下代码示例：

$('#table-id').on('click-row.bs.table', function (e, row, $element) {
  console.log('点击了行', row);
});

示例展示

示例一：静态数据表格

初始化一个基于静态数据的表格，并且设置表格样式为蓝色时尚主题。

<table id="table1"></table>

var data = [
  {
    "id": 1,
    "name": "张三",
    "age": 20
  },
  {
    "id": 2,
    "name": "李四",
    "age": 21
  },
  {
    "id": 3,
    "name": "王五",
    "age": 22
  }
];

$('#table1').bootstrapTable({
  data: data,
  columns: [
    {
      field: 'id', 
      title: 'ID'
    },
    {
      field: 'name',
      title: '姓名'
    },
    {
      field: 'age',
      title: '年龄'
    }
  ],
  classes: 'table table-bordered custom-table',
  striped: true
});

示例二：AJAX数据表格

初始化一个基于AJAX异步请求数据的表格，并且设置表格事件处理函数。

<table id="table2"></table>

$('#table2').bootstrapTable({
  url: 'data.json',
  columns: [
    {
      field: 'id',
      title: 'ID'
    },
    {
      field: 'name',
      title: '姓名'
    },
    {
      field: 'age',
      title: '年龄'
    }
  ]
});

$('#table2').on('click-row.bs.table', function (e, row, $element) {
  console.log('点击了行', row);
});

以上是关于Bootstrap table的使用方法的完整攻略及两个实例说明，希望对你有所帮助。