bootstrap-table 基本用法

bootstrap-table是基于bootstrap的将数据填充为表格的一款插件。功能比较强大，而且也很完善，如果你的项目打算用bootstrap，如果有数据展示方面的需求，它是一个很好的选择。这个是它的官网，下面介绍一下它的基本用法。

首先，引入依赖文件：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>

<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>

既然是基于bootstrap的，所以jQuery也是依赖项，我在这没有加，需要注意一下。

下一步就是需要一个根元素，让插件来填充它。

<table id="list-table"></table>

我们来调用一下插件，让它开始填充根元素。

       $('#list-table').bootstrapTable({
            url:'url',                         //这里是你的请求地址
            method:'post',
            contentType:'application/x-www-form-urlencoded; charset=UTF-8',
            dataType: "json",//数据类型
            striped: true,                      //是否显示行间隔色
            cache: false,
            sortOrder: "asc",                   //排序方式
            queryParams: _queryParams,          //传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pagination: true,                   //是否显示分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            toolbar:'#toolbar',
            showRefresh: true,                  //是否显示刷新按钮
            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            minimumCountColumns: 2,             //最少允许的列数
            showColumns: true,                  //是否显示所有的列
            responseHandler:_responseHandler,     //请求数据成功后，渲染表格前的方法
            uniqueId:'id',
            columns: [{
                checkbox: true                  //table每一行前边都会有一个checkbox 
            }, {
                field: 'id',                    //table 需要展示的后台字段
                title: '编号'                   //后台字段的对应显示文本，也就是table>head
            }]
        })

接下来处理我们上边定义的这些回调方法。

function _queryParams(params){

    return {
        start:0,
        length:10 
    }

}

这个是用来处理请求参数，return回去一个对象就是我们的请求参数。其中的params为我们配置项中的一些配置，比如我们开启了pagination,而且定义了pageNumber、pageSize以后，params会返回offset(pageNumber)以及limit(pageSize)。

function _responseHandler(data){
        
        return{
            rows:data.result.data,
            total:data.result.recordsTotal
        }

}

这个是请求成功后处理为bootstrap-table可识别的格式，data为后台返回的数据，rows就是你需要渲染的数据，total是后台返回的数据总数。

下面是一些比较常用的方法：

目录

formatter(后台数据处理)

表格刷新

操作某一行

---

formatter(后台数据处理)

这个可以定义在columns里面，来处理后台数据，变为我们需要的展示格式，例如：将后台返回的地址包裹在a标签里。

columns:[{
   field:'link',
   title:'链接',
   formatter:function(value,row,index){
      return '<a href="'+value+'">链接</a>'
   }

}]

表格刷新

$('#list-table').bootstrapTable("refresh");//这个适用于服务器端加载表格，相当于重新请求并渲染了一次

$('#list-table').bootstrapTable("load",[]);//这个适用于静态数据渲染

 

操作某一行

经常会有这样的一些需求，我要删除表格中的某一行，或者是修改，这时候可以在columns里面加一个checkbox，然后通过，bootstrap-table返回选中的数据，对它进行处理。

$('#list-table').bootstrapTable('getSelections')