JS组件Bootstrap Table使用方法详解

什么是Bootstrap Table？

Bootstrap Table是一个开源的HTML表格插件，基于Bootstrap和jQuery。它支持分页、排序、筛选、导出等功能，并提供了多种主题和样式，可以方便地美化表格。在Web开发中，Bootstrap Table经常用于数据可视化。

如何使用Bootstrap Table?

步骤一：准备工作

在使用Bootstrap Table之前，需要先引入相关的CSS和JavaScript文件。可以通过CDN或下载至本地。本文以CDN为例，引入Bootstrap和jQuery的样式文件和脚本文件。

<!--引入Bootstrap样式文件-->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<!--引入jQuery脚本文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--引入Bootstrap脚本文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

步骤二：引入Bootstrap Table文件

在准备工作完成后，需要引入Bootstrap Table文件。同样可以通过CDN或下载至本地。本文以CDN为例，引入Bootstrap Table的样式文件和脚本文件。

<!--引入Bootstrap Table样式文件-->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.2/bootstrap-table.min.css">
<!--引入Bootstrap Table脚本文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.2/bootstrap-table.min.js"></script>

步骤三：创建表格

在页面中创建一个HTML表格，并设置表格ID。Bootstrap Table会自动将该表格转换为可排序、可分页、可筛选、可导出的表格。

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

步骤四：初始化表格

在页面加载完成后，使用JavaScript代码初始化表格。可以通过传递数据给Bootstrap Table，在表格中显示数据。

<script>
$(function(){
  //定义表头列
  var columns = [{
      field: 'id',
      title: 'ID'
    }, {
      field: 'name',
      title: 'Name'
    }, {
      field: 'price',
      title: 'Price'
    }];

  //定义表格数据
  var data = [{
      id: 1,
      name: 'Product 1',
      price: '$100'
    }, {
      id: 2,
      name: 'Product 2',
      price: '$200'
    }];

  //初始化表格
  $('#table').bootstrapTable({
    columns: columns,
    data: data
  });
});
</script>

示例说明

示例一：动态设置表格数据

在实际开发中，表格的数据通常不是静态的，而是动态加载的。在以下示例中，通过AJAX请求获取数据，并动态设置表格数据。

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

<script>
$(function() {
  //初始化表格
  $('#table').bootstrapTable({
    columns: [{
        field: 'name',
        title: 'Name'
      }, {
        field: 'gender',
        title: 'Gender'
      }, {
        field: 'age',
        title: 'Age'
    }]
  });

  //异步获取数据
  $.ajax({
    url: 'data.json',
    dataType: 'json',
    success: function(data) {
      //将数据设置给表格
      $('#table').bootstrapTable('load', data);
    }
  });
});
</script>

示例二：自定义列样式

在以下示例中，通过自定义列数据格式和列样式，使表格更加美观。

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

<script>
$(function() {
  //定义表头列和样式
  var columns = [{
      field: 'name',
      title: 'Name',
      align: 'center',
      formatter: function(value, row, index) {
        return '<span style="color:#08c">' + value + '</span>';
      }
    }, {
      field: 'gender',
      title: 'Gender',
      align: 'center',
      formatter: function(value, row, index) {
        if (value === 'M') {
          return '<i class="fa fa-male"></i> Male';
        } else if (value === 'F') {
          return '<i class="fa fa-female"></i> Female';
        } else {
          return value;
        }
      }
    }, {
      field: 'age',
      title: 'Age',
      align: 'center',
      formatter: function(value, row, index) {
        if (value >= 18) {
          return '<span style="color:green">' + value + '</span>';
        } else {
          return '<span style="color:red">' + value + '</span>';
        }
      }
  }];

  //定义表格数据
  var data = [{
      name: 'Tom',
      gender: 'M',
      age: 20
    }, {
      name: 'Mary',
      gender: 'F',
      age: 17
    }, {
      name: 'Bob',
      gender: 'M',
      age: 25
    }];

  //初始化表格
  $('#table').bootstrapTable({
    columns: columns,
    data: data
  });
});
</script>

结论

本文介绍了如何使用Bootstrap Table创建并美化HTML表格，包括准备工作、引入文件、创建表格、初始化表格等步骤，同时提供了两个示例说明：动态设置表格数据和自定义列样式。使用Bootstrap Table可以使Web开发更加高效、美观和易用。