bs-table入坑记

2017-12-28

本文旨在记录我使用 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 数据本身;

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

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

重要参数

名称标签类型默认值描述
heightdata-heightNumberundefined定义表格的高度
stripeddata-stripedBooleanfalse设置为 true 会有隔行变色效果
sortNamedata-sort-nameStringundefined定义排序列,通过url方式获取数据填写字段名，否则填写下标
sortOrderdata-sort-orderString’asc’定义排序方式 ‘asc’ 或者 ‘desc’
idFielddata-id-fieldStringundefined指定主键列
checkboxHeaderdata-checkbox-headerBooleantrue设置 false 将在列头隐藏check-all checkbox
silentSortdata-silent-sortBooleantrue设置为 false 将在点击分页按钮时，自动记住排序项；仅在 sidePagination设置为 server时生效
ajaxdata-ajaxFunctionundefined自定义 AJAX 方法,须实现 jQuery AJAX API
queryParamsdata-query-paramsFunctionfunction(params) {return params;}请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果 queryParamsType = ‘limit’ ,返回参数必须包含 limit, offset, search, sort, order 否则, 需要包含: pageSize, pageNumber, searchText, sortName, sortOrder 返回false将会终止请求
queryParamsTypedata-query-params-typeString’limit’设置为 ‘limit’ 则会发送符合 RESTFul 格式的参数.
responseHandlerdata-response-handlerFunctionfunction(res) {return res;}加载服务器数据之前的处理程序，可以用来格式化数据，参数：res为从服务器请求到的数据；
sidePagination　data-side-paginationString’client’设置在哪里进行分页，可选值为 ‘client’ 或者 ‘server’。设置 ‘server’时，必须设置 服务器数据地址（url）或者重写ajax方法
pageNumberdata-page-numberNumber1如果设置了分页，首页页码
pageSizedata-page-sizeNumber10如果设置了分页，页面数据条数
pageListdata-page-listArray[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的值一致.
      };
    };
});

Random Read