博客

首先简单介绍，bootstrapTable是基于bootstrap样式做的一款表格，方便我们组建表格使用。这里我们就不解释bootstrap怎么引入，使用问题。

1. 引入js,css

    <link href="../bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet">
    <link href="css/playersPrivilegeName.css" type="text/css" rel="stylesheet">
    <link href="css/bootstrap-table.min.css" type="text/css" rel="stylesheet">

    <script type="text/javascript" src="../jquery/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-table-zh-CN.min.js"></script>

注意位置，引入顺序不对也会引起问题

2. html中编写表格

<table id="table"></table>

3.js中根据dom对象去生成

 $('#table').bootstrapTable({
        url: "/users",
        method: "get",
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        toggle: "table",
        pagination: true,//是否分页
        pageSize: 10,//单页记录数
        pageList: [10, 20, 30],//可选择单页记录数
        smartDisplay: false,
        search: false,                      //是否显示表格搜索
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        toolbar: "#toolbar",
        queryParams: function (params) {
            return {
                ct: params.offset / params.limit + 1,  //页码
                size: params.limit,   //页面大小
            };
        },
        responseHandler: function (res) {
        //这里注意，这里是后台接口返回的数据，需要把返回的数据分别对接rows和total 用于分页和展示
            return {
                "rows": res.records,
                "total": res.total
            };
        },
        columns: [{
            field: 'content',
            align: 'center',
            title: '内容',
            formatter:contentFormatter
        },{
            field: 'id',
            title: '操作',
            formatter: operationTable
        }
        ]
    });

/**
 * 操作列
 * @param value 传入的数据
 * @param row 当前行
 * @param index 当前列数
 * @returns {string} 返回渲染数据
 */
function operationTable(value, row, index) {
    return "<button class=\"btn btn-warning\" onclick=\"update('" + value + "')\"> 修改 </button>" +
        "&nbsp;&nbsp;" +
        "<button class=\"btn btn-danger\" onclick=\"delete('" + value + "')\"> 删除 </button>";
}



/**
 * 表格中字段内容过长时采用缩略方式
 */
function contentFormatter(value, row, index) {
    var content = value;
    if(value && value.length >10){
        content = value.substr(0,10)+"..."
    }
    return  "<span data-toggle='tooltip' data-html='true'  data-placement=\"top\" title=\""+value+"\">"+content+"</span>" ;
}

到这，页面基本就可以显示出我们需要的样子了

4添加toolbar 添加工具栏按钮

我们想实现上列表格中积分奖励的下拉和添加按钮

注意上面js中toolbar #toolbar 这里指的是某个id

<div id="toolbar">
    <form class="form-inline">
        <button type="button" class="btn btn-primary glyphicon glyphicon-plus" onclick="insertAwardMonth()">添加</button>
        <select class="form-control" id="awardTypeSearch" onchange="awardConfigChange()">
            <option value="1" selected>积分奖励</option>
            <option value="2">数量奖励</option>
        </select>
    </form>
</div>

可以通过onchange来实现下拉后动态的刷新表格

表格刷新： $(’#table’).bootstrapTable(‘refresh’);

注意坑

bootstrap Table 动态更改后tooltip不会动态的重新生成需要手动去重新绑定

所以我们需要在表格渲染完成后重新执行tooltip函数

更改请看官网api

    /**
     * 刷新tooltip用于支持动态dom
     */
    $('#table').on('post-body.bs.table', function () {
        $("[data-toggle='tooltip']").tooltip();
    });