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,
                     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: '操作',
                     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,
                     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: '操作',
                     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>

-------------------------------------------------------------------------------------------------

QQ群：871934478

版权所有，转载请注明源地址                          

-------------------------------------------------------------------------------------------------