Bootstrap Table使用心得总结

Bootstrap Table 是一款基于 Bootstrap 框架的表格插件，可以快速构建丰富、交互体验友好的数据表格。在实际项目中，Bootstrap Table 的应用十分广泛且易用，下面将介绍一些关于 Bootstrap Table 的使用心得。

安装和引用

在使用 Bootstrap Table 之前，需要先引入相关的 JavaScript 和 CSS 文件。可以通过下载官方提供的压缩包，也可以通过 CDN 的方式引用。

<!-- 引入 Bootstrap 的 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<!-- 引入 Bootstrap Table 的 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-table/1.18.3/bootstrap-table.min.css">
<!-- 引入 jQuery 和 Bootstrap 的 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- 引入 Bootstrap Table 的 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>

基本用法

Bootstrap Table 的基本用法非常简单，只需要在一个 table 标签上加上 class 为 table 和 table-bordered，然后在 JavaScript 中对这个 table 标签调用 bootstrapTable() 方法即可。

<!-- 基本的 Bootstrap Table 标签 -->
<table class="table table-bordered" id="mytable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

<!-- 在 JavaScript 中对该 table 标签调用 bootstrapTable() 方法 -->
<script>
  $(function(){
    $('#mytable').bootstrapTable();
  });
</script>

配置

Bootstrap Table 支持很多配置项，可以自定义表格的样式和数据。以下列出一些常用配置项：

height: 设定表格的高度，可以是数字或百分比。
striped: 是否给单数行和双数行设置不同的背景颜色。
search: 是否显示搜索框。
pagination: 是否显示分页工具条。
data: 表格的数据，可以是一个数组或一个 URL。

示例代码：

<!-- 配置 Bootstrap Table 的高度、显示搜索框、不显示分页工具条 -->
<table class="table table-bordered" id="mytable"
  data-height="400"
  data-search="true"
  data-pagination="false">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

<!-- 在 JavaScript 中对该 table 标签调用 bootstrapTable() 方法，并设置表格数据 -->
<script>
  $(function(){
    $('#mytable').bootstrapTable({
      data:[
        {name:"张三", age:18, gender:"男"},
        {name:"李四", age:20, gender:"女"},
        {name:"王五", age:22, gender:"男"}
      ]
    });
  });
</script>

事件

Bootstrap Table 支持很多事件，可以在表格数据变化、搜索等操作时触发相应的事件。

以下列出一些常用事件：

onLoadSuccess: 表格数据加载成功时触发。
onLoadError: 表格数据加载失败时触发。
onSearch: 当搜索框中的内容改变时触发。
onPageChange: 当分页工具条的页码改变时触发。

示例代码：

<!-- 配置 table 标签，并设置 onLoadSuccess 和 onPageChange 事件 -->
<table class="table table-bordered" id="mytable"
  data-height="400"
  data-search="true"
  data-pagination="true">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

<!-- 在 JavaScript 中对该 table 标签调用 bootstrapTable() 方法，并设置 onLoadSuccess 和 onPageChange 事件 -->
<script>
  $(function(){
    $('#mytable').bootstrapTable({
      onLoadSuccess: function(data){
        console.log('表格数据加载成功');
      },
      onPageChange: function(number, size){
        console.log('页码改变：第 ' + number + ' 页，每页显示 ' + size + ' 条数据');
      }
    });
  });
</script>

插件

Bootstrap Table 还支持很多实用的插件，可以进一步扩展表格的功能。以下列出一些常用插件：

bootstrap-table-export: 可以将表格数据导出为 CSV、XML、PDF 或 Excel 文件。
bootstrap-table-reorder-columns: 可以通过拖拽移动表格的列的位置。
bootstrap-table-filter: 可以在表格上显示一个筛选框，方便快速筛选数据。

示例代码：

<!-- 引入相关的插件文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-table/1.18.3/extensions/export/bootstrap-table-export.min.css">
<script src="https://cdn.staticfile.org/bootstrap-table/1.18.3/extensions/export/bootstrap-table-export.min.js"></script>

<!-- 配置 table 标签，并设置 bootstrap-table-export 插件 -->
<table class="table table-bordered" id="mytable"
  data-height="400"
  data-search="true"
  data-pagination="true"
  data-show-export="true">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

<!-- 在 JavaScript 中对该 table 标签调用 bootstrapTable() 方法，并设置 bootstrap-table-export 插件 -->
<script>
  $(function(){
    $('#mytable').bootstrapTable({
      exportOptions:{
        fileName: '表格导出',
        worksheetName: '表格数据',
      },
      exportTypes:['csv', 'excel', 'pdf', 'xml']
    });
  });
</script>

示例

示例一

在表格中添加自定义按钮和操作列，可以通过 formatter 属性和自定义函数实现。

示例代码：

<!-- 配置 table 标签，并添加“删除”按钮和“操作”列 -->
<table class="table table-bordered" id="mytable"
  data-height="400"
  data-search="true"
  data-pagination="true"
  data-show-columns="true">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th data-field="operate" data-formatter="operateFormatter">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

<!-- 在 JavaScript 中对该 table 标签调用 bootstrapTable() 方法，并添加操作列的 formatter 函数 -->
<script>
  /*
  formatter 函数格式：
  function(value, row, index){
    // value: 当前单元格的值
    // row: 当前行数据
    // index: 当前行下标

    // 返回值可以是一个字符串、HTML 代码或 jQuery 对象
  }
  */
  function operateFormatter(value, row, index){
    return [
      '<a class="btn btn-sm btn-danger" href="javascript:void(0);" title="删除">',
        '<i class="glyphicon glyphicon-trash"></i>',
      '</a>'
    ].join('');
  }

  $(function(){
    $('#mytable').bootstrapTable({
      columns: [{
        field: 'name',
        title: '姓名'
      }, {
        field: 'age',
        title: '年龄',
        sortable: true
      }, {
        field: 'gender',
        title: '性别'
      }]
    });
  });
</script>

示例二

在表格中添加可编辑单元格，可以通过 editable 插件实现。

示例代码：

<!-- 引入相关的插件文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-table/1.18.3/extensions/editable/bootstrap-table-editable.min.css">
<script src="https://cdn.staticfile.org/bootstrap-table/1.18.3/extensions/editable/bootstrap-table-editable.min.js"></script>

<!-- 配置 table 标签，并添加可编辑单元格 -->
<table class="table table-bordered" id="mytable"
  data-height="400"
  data-search="true"
  data-pagination="true"
  data-editable="true">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-field="name" data-editable="true">
        张三
      </td>
      <td data-field="age" data-editable="true">
        18
      </td>
      <td data-field="gender" data-editable="true">
        男
      </td>
    </tr>
    <tr>
      <td data-field="name" data-editable="true">
        李四
      </td>
      <td data-field="age" data-editable="true">
        20
      </td>
      <td data-field="gender" data-editable="true">
        女
      </td>
    </tr>
    <tr>
      <td data-field="name" data-editable="true">
        王五
      </td>
      <td data-field="age" data-editable="true">
        22
      </td>
      <td data-field="gender" data-editable="true">
        男
      </td>
    </tr>
  </tbody>
</table>

<!-- 在 JavaScript 中对该 table 标签调用 bootstrapTable() 方法，并添加 editable 插件 -->
<script>
  $(function(){
    $('#mytable').bootstrapTable({
      columns: [{
        field: 'name',
        title: '姓名'
      }, {
        field: 'age',
        title: '年龄'
      }, {
        field: 'gender',
        title: '性别'
      }]
    });

    // 启用 editable 插件
    $('#mytable').bootstrapTable('editable', {
      mode: 'inline', // 编辑模式：inline 或 popup
      emptytext: '空', // 编辑框为空时显示的文本
      onEditableSave: function(field, row, oldValue, $el){
        // field: 当前编辑的字段名
        // row: 当前行数据
        // oldValue: 当前单元格的旧值
        // $el: 当前单元格的 jQuery 对象

        console.log('编辑单元格：' + field + '，旧值为 ' + oldValue + '，新值为 ' + $el.text());
      }
    });
  });
</script>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap Table使用心得总结 - Python技术站

Bootstrap Table使用心得总结

Bootstrap Table使用心得总结

安装和引用

基本用法

配置

事件

插件

示例

示例一

示例二

相关文章