Bootstrap-table的使用小结

简介

Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。目前在github上已经有2600多个Star,可见其受欢迎程度。其官方网站地址 为:http://bootstrap-table.wenzhixin.net.cn/。

如何引入

两个js,一个css,我用的webjars管理的,写法如下

1
2
3
<link href="/webjars/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<script src="/webjars/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/webjars/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

pom 文件增加依赖

1
2
3
4
5
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap-table</artifactId>
<version>1.9.1</version>
</dependency>

如何使用

html

在需要使用table的位置插入

1
2
3
4
5
6
7
<table id="table1" data-mobile-responsive="true" data-click-to-select="true">
<thead>
<tr>
<th data-field="selectItem" data-checkbox="true"></th>
</tr>
</thead>
</table>

js

在页面下面添加js

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
<script type="text/javascript">
$('#table1').bootstrapTable({
columns: [
{ field: 'id', title: 'ID' },
{ field: 'title', title: '标题' },
{ field: 'content', title: '内容' },
]
,
url: '/list',
showRefresh: true, //是否显示刷新按钮
search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端
strictSearch: false, //设置为 true启用 全匹配搜索,否则为模糊搜索
pagination: true, //是否显示分页条
icons: {
refresh: 'glyphicon-repeat',
toggle: 'glyphicon-list-alt',
columns: 'glyphicon-list'
},

pagination: true, //是否显示分页(*)
clickToSelect: true, //是否启用点击选中行
//showToggle:true, //是否显示详细视图和列表视图
showColumns: true, //是否显示所有的列
});
</script>

参考


Bootstrap-table的使用小结
https://blog.fengcl.com/2018/04/11/bootstrap-table/
作者
frank
发布于
2018年4月11日
许可协议