bs-table入坑记

本文旨在记录我使用 bootstrap-table 时候的一些记录,和与部分需求结合的使用情况

bootstrap-table

基于 jQuery 的表格插件,重在该有的都有,相当适合上手,下称 bs-table

基础玩法

最基本的引入和把玩,并没有很多高超的技巧,只要引入了 css,和 js,在不适用的情况下,在 table标签内直接添加 data-toggle="table" 也是可以激活 bs-table

<link href="../style/bootstrap.min.css">
<link href="../style/bootstrap-table.min.css">
  <!-- some more... -->
  <table data-toggle="table">
    <thead>
      <th>
      <!-- some -->
      </th>
    </thead>
    <tbody>
      <th>
      <!-- some -->
      </th>
    </tbody>
    <tbody id="dataBody">
    </tbody>
  </table>
 <!-- some more... -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-table.min.js"></script>
<script src="../js/bootstrap-table-zh-CN.min.js"></script>

初始化插件参数

具体文档已官方为主,官方的翻译也还好,此处列举代码里面的参数都是本人常用的,初始化插件参数的方式有两种:

直接在标签里面添加参数

<table class="table text-nowrap"
  data-toggle="table"
  data-checkbox-header="true"
  data-show-toggle="true"
  data-show-columns="true"
  data-query-params-type="undefined"
  data-show-refresh="true"
  data-search="true"
  data-strict-search="true">

  <!-- some -->

</table>

使用 js 初始化带入参数

<table class="table text-nowrap" id="myTable"

  <!-- some -->

</table>

因为引入了 jQuery ,所以直接用就好了

$(document).ready(function() {
  var $myTable = $('#myTable')
  $('#myTable').bootstrapTable({
    showHeader:true,
    showFooter:false,
    showColumns:true,
    //....
  })
});

进阶玩法

好了,基本的玩法之后熟悉之后,还是需要数据来玩,才能把 bs-table 玩得出彩;

后台返回来的数据结构,一般会包含当前页码每页的数据量数据总和table 数据本身;

这里的演示,都在借助聚合数据里的免费图书数据;

这边只作本人习惯的写法,过多的就不写了;

重要参数

名称 标签 类型 默认值 描述
height data-height Number undefined 定义表格的高度
striped data-striped Boolean false 设置为 true 会有隔行变色效果
sortName data-sort-name String undefined 定义排序列,通过url方式获取数据填写字段名,否则填写下标
sortOrder data-sort-order String ‘asc’ 定义排序方式 ‘asc’ 或者 ‘desc’
idField data-id-field String undefined 指定主键列
checkboxHeader data-checkbox-header Boolean true 设置 false 将在列头隐藏check-all checkbox
silentSort data-silent-sort Boolean true 设置为 false 将在点击分页按钮时,自动记住排序项;仅在 sidePagination设置为 server时生效
ajax data-ajax Function undefined 自定义 AJAX 方法,须实现 jQuery AJAX API
queryParams data-query-params Function function(params) {return params;} 请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,例如 toolbar 中的参数 如果 queryParamsType = ‘limit’ ,返回参数必须包含 limit, offset, search, sort, order 否则, 需要包含: pageSize, pageNumber, searchText, sortName, sortOrder 返回false将会终止请求
queryParamsType data-query-params-type String ‘limit’ 设置为 ‘limit’ 则会发送符合 RESTFul 格式的参数.
responseHandler data-response-handler Function function(res) {return res;} 加载服务器数据之前的处理程序,可以用来格式化数据,参数:res为从服务器请求到的数据;
sidePagination data-side-pagination String ‘client’ 设置在哪里进行分页,可选值为 ‘client’ 或者 ‘server’。设置 ‘server’时,必须设置 服务器数据地址(url)或者重写ajax方法
pageNumber data-page-number Number 1 如果设置了分页,首页页码
pageSize data-page-size Number 10 如果设置了分页,页面数据条数
pageList data-page-list Array [10, 25, 50, 100, All] 如果设置了分页,设置可供选择的页面数据条数。设置为 All 或者 Unlimited,则显示所有记录。

html 里初始化基本的参数

<table class="table text-nowrap" id="#myTable"
  data-checkbox-header="true"
  data-show-toggle="false"
  data-show-columns="true"
  data-toolbar="#toolbar"
  data-query-params-type="undefined"
  data-show-refresh="true"
  data-pagination-loop="false"
  data-show-pagination-switch="false"
  data-side-pagination="server"
  data-pagination="true"
  data-search="true"
  data-strict-search="true"
  data-show-export="true">
  <thead>
      <tr>
        <th data-field="getCheck" data-checkbox="true"></th>
        <th data-field="title">书名</th>
        <th data-field="sub1">简介</th>
        <th data-field="reading">购买数量</th>
        <!-- some -->
      </tr>
    </thead>
</table>

js 里完成请求与数据处理


$(document).ready(function() {
  var url = 'http://apis.juhe.cn/goodbook/querycatalog_id=242&dtype=&key=adbe8a45c24acd16f0315f4ee463215b'
  var $myTable = $('#myTable')
  $('#myTable').bootstrapTable({
    //.... option init
    ajax: ajaxRequest,
    responseHandler: responseHandler,
    queryParams: queryParams,
    pageList: [15],
    pageSize: 15,
    pageNumber: 1,
    silent: true,
  })
  //ajax 请求
  function ajaxRequest(parames) {
    $.post(url, parames.data, function (result, textStatus, xhr) {
      //返回值处理
        result.resultcode ? parames.success(function () {
          //行与总数带入
          return {
            "rows": result.result.data.List,
            "total": result.result.data.totalNum,
          }
        }()) : parames.error(function () {
          return {}
        }())
      })
      .fail(function () {
        parames.error({})
      })
  }
  //请求参数处理
    function queryParams(params) {
      params = {
        pageSize: params.pageSize,
        PageNumber: params.pageNumber,
        pn: params.pageNumber,
      }
      return params
    }
  //返回值处理
    function responseHandler(result) {
      var pageDate = result.rows ? result.rows : 0

      return {
        "rows": result.rows || [], //总页数,前面的key必须为"total"
        "total": result.total || [], //行数据,前面的key要与之前设置的dataField的值一致.
      };
    };
});