bootstrap table使用及遇到的問題

本人前端菜鳥一枚，最近使用bootstrap table實現表格，記錄一下以便日后翻閱，廢話不多說，先看效果圖：

1、首先說下要實現該效果需要添加的css樣式及所需的js文件，具體下載地址就不粘貼了(因為太懶)

 <link rel="stylesheet" href="css/bootstrap.min.css">
 <link rel="stylesheet" href="css/bootstrap-table.min.css">
 <script src="js/jquery-2.1.4.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.js"></script>

2、html頁面中需要准備的元素如下：

 <div class="container">
     <!--存放工具欄-->
     <div id="toolbar"></div>
     <!--存放生成的表格-->
     <table id="searchResults" class="table table-hover">
     </table>
 </div>

3、萬事俱備只欠東風，東風就是數據問題，這里有一點需要注明，客戶端（client）的數據和服務端（server）的數據格式略有差異，這里展示出來以供參考（本人使用的是客戶端的數據)。

客戶端數據格式（clientJson.json）：

 

[
    {
        "id": 0,
        "name": "李雷",
        "sex": "男",
        "age": "12",
        "cls": "一年級",
        "score": "81",
        "action": "操作"
    },
    {
        "id": 1,
        "name": "韓梅梅",
        "sex": "女",
        "age": "11",
        "cls": "一年級",
        "score": "90",
        "action": "操作"
    }
]

 

服務端數據格式（serverJson.json）:

{
  "total": 2,
  "rows": [
    {
      "id": 0,
      "name": "李雷",
      "sex": "男",
      "age": "12",
      "cls": "一年級",
      "score": "81"
    },
    {
      "id": 1,
      "name": "韓梅梅",
      "sex": "女",
      "age": "11",
      "cls": "一年級",
      "score": "90"
    }
  ]
}

 

4、所有的css、js、頁面元素及數據都已經准備完畢，那么該如何生成表格呢？請看下面代碼及注釋，部分模塊的顯示效果已經在文章開頭的圖片中顯示出來，請看官對號入座。

function createTab() {
        $('#searchResults').bootstrapTable('destroy').bootstrapTable({
            url: 'json/clientJson.json',
            /*data : data,*/

            toolbar: '#toolbar',                //工具按鈕用哪個容器
            method: 'get',                      //請求方式
            striped: true,                      //是否顯示行間隔色
//            cache: false,                       //是否使用緩存
            toolbarAlign: "right", //工具欄對齊方式
            sidePagination: "client", //分頁方式：client客戶端分頁，server服務端分頁
            search: true,//是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端
            uniqueId: "id",
            pageNumber: 1,                       //初始化加載第一頁
            pageSize: 1,                       //每頁的記錄行數
            pageList: [1, 2, 3], //可供選擇的每頁的行數
            pagination: true, // 是否分頁
            sortable: true, // 是否啟用排序
            sortOrder: "asc",                   //排序方式
            showColumns: true, //是否顯示列選擇按鈕
            showRefresh: true,                  //是否顯示刷新按鈕
            clickToSelect: true,                //是否啟用點擊選中行
//            height: 500,                        //行高
            showToggle: true,                    //是否顯示詳細視圖和列表視圖的切換按鈕
            cardView: false,                    //是否顯示詳細視圖
            detailView: false,                   //是否顯示父子表
            queryParamsType: '',//設置請求參數格式
            queryParams: function queryParams(params) { //設自定義查詢參數
                /*請求遠程數據時，您可以通過修改queryParams來發送其他參數。
                如果queryParamsType = 'limit'，params對象包含：limit，offset，search，sort，order。
                否則，它包含：pageSize，pageNumber，searchText，sortName，sortOrder。
                返回false停止請求。
                默認： function(params) { return params }*/
                return params;
            },
            columns: [
                {
                    title: "全選",
                    field: "select",
                    checkbox: true,
                    width: 20, //寬度
                    align: "center", //水平
                    valign: "middle" //垂直
                },
                {
                    field: 'no',
                    title: '序號',
                    align: "center",
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }
                ,
                {
                    field: 'name',
                    title: '名字',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'sex',
                    title: '性別',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'age',
                    title: '年齡',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'cls',
                    title: '年級',
                    align: 'center',
                    valign: 'middle',
                },
                {
                    field: 'score',
                    title: '分數',
                    align: 'center',
                    valign: 'middle',
                },
                {
                    field: 'id',
                    title: '操作',
                    width: 120,
                    align: 'center',
                    valign: 'middle',
                    formatter: actionFormatter
                }
            ]
        });

    }

    //操作欄的格式化
    function actionFormatter(value, row, index) {
        var id = row.id;
        var result = "";
        result += "<button style='cursor: pointer' class='btn btn-primary' title='修改' onclick=''>修改</button>";
        return result;
    }

4、ok，現在表格已經展示出來了，過程很簡單，但是我剛開始做的時候碰見一個問題： Syntax error, unrecognized expression，如下圖所示。wfk？搗鼓半天終於發現，是jquery的版本問題，1.9的版本顯然不好使，於是換成2.1的版本，終於大功告成。

5、最后，雙手送上完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格及下載</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-table.min.css">
    <!--<script src="js/jquery-2.1.4.min.js"></script>-->
      <script src="js/jquery-1.9.1.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.js"></script>
</head>
<body>
<div class="container text-center">
    <button name='createTab' id='creatTab' type="button"
            class="btn btn-primary" onclick="createTab()">生成表格
    </button>
</div>
<div class="container">
    <!--存放工具欄-->
    <div id="toolbar"></div>
    <!--存放生成的表格-->
    <table id="searchResults" class="table table-hover">
    </table>
</div>
</body>
<script>
    function createTab() {
        $('#searchResults').bootstrapTable('destroy').bootstrapTable({
            url: 'json/clientJson.json',
            /*data : data,*/

            toolbar: '#toolbar',                //工具按鈕用哪個容器
            method: 'get',                      //請求方式（*）
            striped: true,                      //是否顯示行間隔色
//            cache: false,                       //是否使用緩存
            toolbarAlign: "right", //工具欄對齊方式
            sidePagination: "client", //分頁方式：client客戶端分頁，server服務端分頁（*）
            search: true,//是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端
            uniqueId: "id",
            pageNumber: 1,                       //初始化加載第一頁
            pageSize: 1,                       //每頁的記錄行數
            pageList: [1, 2, 3], //可供選擇的每頁的行數
            pagination: true, // 是否分頁
            sortable: true, // 是否啟用排序
            sortOrder: "asc",                   //排序方式
            showColumns: true, //是否顯示列選擇按鈕
            showRefresh: true,                  //是否顯示刷新按鈕
            clickToSelect: true,                //是否啟用點擊選中行
//            height: 500,                        //行高
            showToggle: true,                    //是否顯示詳細視圖和列表視圖的切換按鈕
            cardView: false,                    //是否顯示詳細視圖
            detailView: false,                   //是否顯示父子表
            queryParamsType: '',//設置請求參數格式
            queryParams: function queryParams(params) { //設自定義查詢參數
                /*請求遠程數據時，您可以通過修改queryParams來發送其他參數。
                如果queryParamsType = 'limit'，params對象包含：limit，offset，search，sort，order。
                否則，它包含：pageSize，pageNumber，searchText，sortName，sortOrder。
                返回false停止請求。
                默認： function(params) { return params }*/
                return params;
            },
            columns: [
                {
                    title: "全選",
                    field: "select",
                    checkbox: true,
                    width: 20, //寬度
                    align: "center", //水平
                    valign: "middle" //垂直
                },
                {
                    field: 'no',
                    title: '序號',
                    align: "center",
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }
                ,
                {
                    field: 'name',
                    title: '名字',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'sex',
                    title: '性別',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'age',
                    title: '年齡',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'cls',
                    title: '年級',
                    align: 'center',
                    valign: 'middle',
                },
                {
                    field: 'score',
                    title: '分數',
                    align: 'center',
                    valign: 'middle',
                },
                {
                    field: 'id',
                    title: '操作',
                    width: 120,
                    align: 'center',
                    valign: 'middle',
                    formatter: actionFormatter
                }
            ]
        });

    }

    //操作欄的格式化
    function actionFormatter(value, row, index) {
        var id = row.id;
        var result = "";
        result += "<button style='cursor: pointer' class='btn btn-primary' title='修改' onclick=''>修改</button>";
        return result;
    }
</script>
</html>