Bootstrap Table的使用

最近在做畢業設計，需要在前台把背景的資料用表格顯示出來，發現一款表格元件神器–Bootstrap Table, 這次記錄下來，友善以後使用。

1.第一種

隻是用到table标簽

注意：data-url的路徑和data-method是controller層的@PostMapping
<table id="mytable" data-toggle="table"
           data-url="/test" data-method="post"
           data-query-params="queryParams" data-toolbar="#toolbar"
            data-search="true" data-show-refresh="true"
           data-show-toggle="true" data-show-columns="true"
           data-page-list="[2,4,8,16,ALL]" data-pagination="true">
        <thead>
        <tr>
            <th width="70" data-field="id">id</th>
            <th width="70" data-field="studentId">studentId</th>
            <th width="94" data-field="password">password</th>
        </thead>
    </table>
           

2.第二種

2.1 用到table 和 js 沒有翻頁的

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

<script>
    //沒有翻頁的
    var $table = $('#data-table');
    $table.bootstrapTable({
        url: '/test',
        columns: [{
            field: 'id',
            title: 'id'
        }, {
            field: 'name',
            title: 'name'
        }, {
            field: 'phone',
            title: 'phone'
        } ]
    });
</script>
           

2.2 用到table 和 js 可以翻頁的

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

<script>
    //可以翻頁的
    var $table = $('#data-table');
    //查詢參數
    var queryParams = {id: 1};
    /**
     * 初始化Table
     */
    //先銷毀表格
    $table.bootstrapTable('destroy');
    //初始化表格
    $table.bootstrapTable({
        //表格參數
        //請求位址,此處資料為本地加載
        url: '/test',
        //請求方式
        method: "get",
        //請求内容類型
        contentType: "application/x-www-form-urlencoded",
        //資料類型
        dataType: "json",
        //table高度：如果沒有設定，表格自動根據記錄條數覺得表格高度
        height: '582',
        //是否顯示行間隔色
        striped: true,
        //是否啟用排序
        sortable: true,
        //排序方式
        sortOrder: "asc",
        //是否使用緩存
        cache: false,
        //每行的唯一辨別
        uniqueId: "id",
        //指定工具欄
        toolbar: "#toolbar",
        //顯示重新整理按鈕
        showRefresh: false,
        //切換顯示樣式
        showToggle: false,
        //預設顯示詳細視圖
        cardView: false,
        //是否顯示搜尋
        search: true,
        //是否顯示分頁
        pagination: true,
        //是否啟用點選選中行
        clickToSelect: true,
        //最少要顯示的列數
        minimumCountColumns: 2,
        //顯示隐藏列
        showColumns: false,
        //cell沒有值時顯示
        undefinedText: '-',
        //分頁方式：client用戶端分頁，server服務端分頁
        /*	              指定。注意，這兩種背景傳過來的json資料格式也不一樣
         client : 正常的json array格式 [{},{},{}]
         server： {“total”:0,”rows”:[]} 其中total表示查詢的所有資料條數，後面的rows是指目前頁面展示的資料量。*/
        sidePagination: "client",
        //每頁的記錄行數
        pageSize: 10,
        //初始化加載第1頁，預設第1頁
        pageNumber: 1,
        //可供選擇的每頁的行數
        pageList: "[10, 20, 50, 80, 100]",
        paginationFirstText: "首頁",
        paginationPreText: "上一頁",
        paginationNextText: "下一頁",
        paginationLastText: "末頁",
        //按鈕樣式
        buttonsClass: 'btn',
        //分頁器class
        iconSize: 'pager',
        //查詢條件
        queryParams: queryParams,
        //列參數
        //表頭
        columns: [
            {
                title: '選擇',
                checkbox: true,
                align: 'center' // 居中顯示
            }, {
                field: 'id',
                title: 'id'
            }, {
                field: 'name',
                title: 'name'
            }, {
                field: 'phone',
                title: 'phone'
            } , {
                field: 'grade',
                title: 'grade'
            } , {
                field: 'college',
                title: 'college'
            }  ],
        onLoadSuccess: function (res) {//可不寫
            //加載成功時
            console.log(res);
        }, onLoadError: function (statusCode) {
            return "加載失敗了"
        }, formatLoadingMessage: function () {
            //正在加載
            return "拼命加載中...";
        }, formatNoMatches: function () {
            //沒有比對的結果
            return '無符合條件的記錄';
        }

    });

    // 擷取表格所有已經勾選的行資料，為一個對象數組
    var selects = $table.bootstrapTable('getSelections');

    //重新整理
    $("#btnRefresh").on('click', function(){
        $table.bootstrapTable('refresh');
    });
</script>
           

3.Controller 層代碼

@ResponseBody
@RequestMapping(value="/test",produces = "application/json;charset=utf-8")
    public String test(){
        Wrapper<StudentEntity> wrapper = new EntityWrapper<>();
        wrapper.isNotNull("id");
        List<StudentEntity> list = studentDao.selectList(wrapper);
        String data = FastJsonUtils.toString(list);
        return data;
    }
           

以下是Bootstrap Table顯示的頁面