bootstrap table之通用方法（ 时间控件，导出，动态下拉框， 表单验证 ，选中与获取信息）代码分享

下面我会详细讲解 “bootstrap table之通用方法”的完整攻略，并提供两个示例说明。

一、 引入必要的文件和库

首先，我们需要引入必要的文件和库，包括 Bootstrap、jQuery、moment以及

<!-- Bootstrap -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

<!-- moment.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/locale/zh-cn.min.js"></script>

<!-- bootstrap-table -->
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- bootstrap-table-export -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/extensions/export/bootstrap-table-export.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>

<!-- bootstrap-select -->
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script>

二、 时间控件

使用 Bootstrap Datetimepicker 插件实现时间控件，代码如下所示：

<!-- 引入 datetimepicker -->
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<!-- 时间控件 -->
<div class="input-group date" id="datetimepicker" data-target-input="nearest">
  <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker" />
  <div class="input-group-append" data-target="#datetimepicker" data-toggle="datetimepicker">
    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
  </div>
</div>

<script>
$(function () {
  $('#datetimepicker').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss',
    locale: 'zh-cn'
  });
});
</script>

三、 导出

使用 Bootstrap Table Export 插件实现导出功能，支持 Excel 和 CSV 格式，代码如下所示：

<!-- 导出按钮 -->
<button type="button" class="btn btn-primary" id="export-btn">导出</button>

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

  // 导出按钮点击事件
  $('#export-btn').click(function () {
    $('#table').tableExport({
      type: 'xlsx',  // 导出 Excel 格式
      fileName: '表格',  // 文件名
      ignoreColumn: [0],  // 忽略第0列
      ignoreRows: null,  // 不忽略任何行
      excelSheetName: 'Sheet1',  // Excel Sheet 名称
      onMsoNumberFormat: function (cell, row, col) {
        if (col == 4) {  // 第4列格式化为货币
          return '$' + cell;
        } else {
          return cell;
        }
      }
    });
  });
});
</script>

四、 动态下拉框

使用 Bootstrap Select 插件实现动态下拉框功能，可以从后台获取数据并动态生成下拉选项，代码如下所示：

<!-- 动态下拉框 -->
<select class="selectpicker" data-live-search="true">
  <!-- 后台返回的数据 -->
  <option data-tokens="北京, 北京市">北京 北京市</option>
  <option data-tokens="上海, 上海市">上海 上海市</option>
  <option data-tokens="广州, 广东省">广州 广东省</option>
</select>

<script>
$(function () {
  // 下拉框初始化
  $('.selectpicker').selectpicker();

  // 获取数据并动态生成下拉选项
  $.ajax({
    url: '/api/city',
    type: 'GET',
    success: function (data) {
      var options = '';
      for (var i = 0; i < data.length; i++) {
        options += '<option data-tokens="' + data[i].name + ', ' + data[i].province + '">' + data[i].name + ' ' + data[i].province + '</option>';
      }
      $('.selectpicker').append(options);
      $('.selectpicker').selectpicker('refresh');
    }
  });
});
</script>

五、 表单验证

使用 Bootstrap Validator 插件实现表单验证功能，可以自定义验证规则和提示信息，代码如下所示：

<!-- 表单 -->
<form id="form" method="post">
  <div class="form-group">
    <label>姓名:</label>
    <input type="text" class="form-control" name="name" required>
  </div>
  <div class="form-group">
    <label>手机号:</label>
    <input type="text" class="form-control" name="phone" data-bv-regexp="true" data-bv-regexp-regexp="^1[3456789]\d{9}$" data-bv-regexp-message="请输入正确的手机号码" required>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary">提交</button>
  </div>
</form>

<script>
$(function () {
  // 表单验证
  $('#form').bootstrapValidator({
    // 自定义验证规则和提示信息
    fields: {
      name: {
        validators: {
          notEmpty: {
            message: '姓名不能为空'
          }
        }
      },
      phone: {
        validators: {
          notEmpty: {
            message: '手机号不能为空'
          }
        }
      }
    }
  });
});
</script>

六、 选中与获取信息

使用 Bootstrap Table 插件的选中事件和获取选中行的方法实现选中与获取信息功能，代码如下所示：

<!-- 表格 -->
<table id="table"></table>

<script>
$(function () {
  // 表格初始化
  $('#table').bootstrapTable({
    // ...
    onClickRow: function (row) {
      console.log(row);  // 输出选中行的数据
    }
  });

  // 获取选中行的数据
  var selectedRows = $('#table').bootstrapTable('getSelections');
  console.log(selectedRows);
});
</script>

以上就是 “bootstrap table之通用方法”的完整攻略，希望对你有帮助。