Bootstrap-Table的基本使用教程

本文最后更新于：1 年前

引入文件

引入CSS文件

1
2
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-table.min.css">

引入js文件

1
2
3
4
<script src="js/jquery-1.11.0.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.min.js"></script>

初始化表格

表格的初始化有两种方式:

一种是通过数据属性初始化：

1
2
3
4
5
6
7
8
9
10
11
12
<table
  data-toggle="table"
  data-url="data.json"
  data-pagination="true">
  <thead>
    <tr>
      <th data-sortable="true" data-field="id">Item ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

另一种是通过JavaScript初始化：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table id="table"></table>

$('#table').bootstrapTable({
  url: 'data.json',
  pagination: true,
  columns: [{
    field: 'id',
    title: 'Item ID'
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  }]
})

如果只是做简单的数据展示的话，比较适合用数据属性初始化表格；如果表格结构功能复杂更推荐使用JS，处理表格比较容易。下面我就用JS初始化一个带有各种常用选项的表格。

HTML

1
<table class="table table-striped table-hover" id="table-request" ></table>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
// 初始化表格
$('#table-request').bootstrapTable({
    url: '../test0.json',             //请求后台的URL（*）/article/list
    method: 'get',                      //请求方式（*）
    toolbar: '#toolbar',                //工具按钮用哪个容器
    striped: true,                      //是否显示行间隔色
    locale: 'zh-CN',
    resizable: true,                    //设置height后拖动调整列宽失效
    cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    pagination: true,                   //是否显示分页（*）
    sortable: false,                     //是否启用排序
    queryParams: 'queryParams',         //传递参数（*）
    queryParamsType: '',                //查询参数类型
    sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
    pageNumber:1,                       //初始化加载第一页，默认第一页
    pageSize: 10,                       //每页的记录行数（*）
    pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
    totalField: 'total',
    dataField: 'rows',
    smartDisplay:false,
    search: false,                      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
    strictSearch: true,
    showColumns: false,                 //是否显示所有的列
    showRefresh: false,                 //是否显示刷新按钮
    minimumCountColumns: 2,             //最少允许的列数
    clickToSelect: false,                //是否启用点击选中行
    // height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
    uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
    showToggle:false,                   //是否显示详细视图和列表视图的切换按钮
    cardView: false,                    //是否显示详细视图
    detailView: false,                   //是否显示父子表
    columns: [
        // {
        //     field:'id',
        //     title:'文章id',
        //     // visible: false,
        // },{
        //     field:'id',
        //     // field:'title',
        //     title:'文章标题',
        // },{
        //     field:'name',
        //     // field:'roundup',
        //     title:'摘要',
        // },{
        //     field:'price',
        //     // field:'ntype',
        //     title:'所属分类',
        //     // formatter: function (value, row, index) {
        //     //     if (row['ntype'] === 1) {
        //     //         return '集团新闻';
        //     //     }
        //     //     if (row['ntype'] === 2) {
        //     //         return '媒体报道';
        //     //     }
        //     //     if (row['ntype'] === 3) {
        //     //         return '社会活动';
        //     //     }
        //     //         return value;
        //     // },
        // },{
        //     field:'opt',
        //     // field:'uptime',
        //     title:'修改时间',
        // },{
        //     field:'action',
        //     title:'操作',
        //     events:'operateEvents',
        //     formatter:'operateFormatter',       //自定义表格内容，字符串内是方法名称
        // }
        {
            field:'id',
            title:'文章id',
            visible: false,
        },{
            field:'title',
            title:'文章标题',
            width: 300,
        },{
            field:'roundup',
            title:'摘要',
            width: 300,
        },{
            field:'ntype',
            title:'所属分类',
            formatter: function (value, row, index) {
                if (row['ntype'] == 1) {
                    return '集团新闻';
                }
                if (row['ntype'] == 2) {
                    return '媒体报道';
                }
                if (row['ntype'] == 3) {
                    return '社会活动';
                }
                    return value;
            },
        },{
            field:'uptime',
            title:'修改时间',
        },{
            field:'action',
            title:'操作',
            events:'operateEvents',
            formatter:'operateFormatter'      
        }
    ]
        //列设置
});

请求参数设置

1
2
3
4
5
6
7
8
9
10
11
//请求参数设置
function queryParams(params) {
    return {
        npage: params.pageNumber,      //页码
        pagesize: params.pageSize,        //一页多少条记录
        ntype: $('#article-class').val(),  //文章类型
        btime : $('#start-time').val(), //起始时间 
        etime : $('#end-time').val(), //结束时间 
            // name: $(...).val()   //其他自定义参数，从页面获取
        }
}

单元格自定义设置：行内操作按钮

1
2
3
4
5
6
7
function operateFormatter(value, row, index) {
    return [
        '<div class="btn-group" role="group" aria-label="...">',
        '<button type="button" class="btn btn-default edit">编辑</button>',
        '<button type="button" class="btn btn-danger remove">删除</button>','</div>',
    ].join('');
}

处理行内按钮的点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
window.operateEvents = {
    'click .edit': function (e, value, row, index) {
            alert("edit");
            // 点编辑打开模态框并获取内容
            document.getElementById("text-id").value = row.id;
            $('#myModal2').modal({});
            console.log(document.getElementById("text-id").value);
            var id = row.id;
            var sj = {id:id};
            var sj = JSON.stringify(sj);
        //     $.ajax({
        //         type:"post",
        //         url:"/article/detail",
        //         data:sj,
        //         async:false,
        //         success: function(res){
        //             if (res.result == "OK") {
                    // console.log(res.data);
                        // var obj = res.data;
                        // if ($.isEmptyObject(obj)) {
                        //     alert("获取文章数据失败");
                        // }else{
                        //     document.getElementById("text-title2").value = obj.title;
                        //     document.getElementById("text-summary2").value = obj.roundup;
                        //     document.getElementById("text-class2").value = obj.ntype;
                        //     document.getElementById("upload_img2").src = obj.thumb;
                        //     $('#summernote2').summernote('code',obj.content);
                        //     $('#myModal2').modal({});
                        // }
        //             }else{
                        // if (res.errorcode == 1) {
                        //     alert("未登录，请先登录");
                        //     location.href = "login.html";
                        // }}
        //         },
                // error: function(err){alert("获取文章内容网络错误");}               
        //     });
    },
    'click .remove': function (e, value, row, index) {
            alert("remove");
            // 删除文章
            var id = row.id;
            var sj = {id:id};
            var sj = JSON.stringify(sj);
            var conf = confirm("确定要删除"+row.name+"吗");
            if (conf == true) {
                alert("删除");
//     $.ajax({
//         type:"post",
//         url:"/article/del",
//         data:sj,
//         async:false,
//         success: function(res){
//             if (res.result == "OK") {
// //					alert("删除成功");
//                 location.reload();
//             }else{}
//         }
//     });
            } else {
                alert("不删");
            }
    },
};

表格可调整列宽（插件）

首先需要引入CSS和js文件

1
<link rel="stylesheet" href="css/jquery.resizableColumns.css">
1
2
<script src="js/jquery.resizableColumns.min.js"></script>
<script src="js/bootstrap-table-resizable.min.js"></script>

然后设置数据属性data-resizable为true或者在JS初始化的表格中添加选项resizable:true

插件存在的已知问题：当设置了表格高度时，此插件无法正常工作。也就是说，在设置表格高度以启用固定表格列头之后，表格的调整列宽功能将出现问题（其实就是二选一）。

完整代码

1
2
3
4
5
6
7
8
9
10
11
//请求参数设置
function queryParams(params) {
    return {
        npage: params.pageNumber,      //页码
        pagesize: params.pageSize,        //一页多少条记录
        ntype: $('#article-class').val(),  //文章类型
        btime : $('#start-time').val(), //起始时间 
        etime : $('#end-time').val(), //结束时间 
            // name: $(...).val()   //其他自定义参数，从页面获取
        }
}

更多功能可以到官网查看，或者查看下面的参考链接。

参考链接

Bootstrap Table

Bootstrap Table中文网

JS组件系列——表格组件神器：bootstrap table

表格神器bootstraptable

Bootstrap Table API 中文版（完整翻译文档）

BootstrapTable中文文档

bootstrap table使用总结