-

Bootstrap表格插件Bootstrap Table

WEB前端

最近公司有个项目需要把数据库的数据展示出来方便查看和分析。这个需求主要是显示数据和搜索,加一些简单的事件来处理,还有点就是要快。既然就这一个简单的功能,大概就一个页面,准备用Bootstrap 框架快速页面布局,方便后面随时修改。Bootstrap 默认的表格是很简陋的,并不能完成这个需求。在网上搜索无意中找到Bootstrap Table。Bootstrap Table可以很好的和Bootstrap结合。文档和例子很全面。功能也很丰富。下面雷雪松就简单的介绍一下Bootstrap Table的使用技巧。

1、引入Bootstrap、Font Awesome、jQuery和Bootstrap Table,最简单模板如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, Bootstrap Table!</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
</head>
<body>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
</body>
</html>

2、定义一个容器,并且配置Bootstrap Table的参数。通过data属性或JavaScript以表格格式显示数据。本文主要使用JavaScript的方式来配置。data属性的配置可以直接用data-配置项。Bootstrap Table的数据来源,主要分两种,一种是本地数据源,一种是从服务端获取。分页、查询、排序等都和这个有关系。

1
<table id="table"></table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$('#table').bootstrapTable({
columns: [{//表头
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
data: [{//表格内容
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}]
})

3、自定义传给服务端的参数,可以通过queryParams参数来配置。

1
2
3
4
5
6
7
queryParams: function(params) { //上传服务器的参数
var temp = { //如果是在服务器端实现分页,limit、offset这两个参数是必须的
page: params.pageNumber, //当前页码
pageSize: params.pageSize, //每页条数
};
return temp
}

4、Bootstrap Table修改配置,重新生成表格可以先destroy销毁,然后再重新配置。

1
2
3
$('#table').bootstrapTable('destroy').bootstrapTable({
......//省略的其他配置
})

5、Bootstrap Table导入导出,可以引入tableExport.min.js和bootstrap-table-export来实现。然后在配置中设置导出的类型和数据。

1
2
3
4
5
6
$('#table').bootstrapTable({
...//省略的其他配置
showExport: true,//显示导出按钮
exportDataType: 'all',//导出所有(all),默认为当前页(basic),也可以设置导出选中的(elected)。
exportTypes: ['csv'],//导出格式为csv
})

6、Bootstrap Table设置为中文,直接引入dist/locale/bootstrap-table-zh-CN.min.js即可。

以上是雷雪松对Bootstrap Table的相关用法的讲解。如果希望更加深入的使用Bootstrap Table,可以去Bootstrap Table的官网:https://bootstrap-table.com/查看更详细的API。

来源:Bootstrap表格插件Bootstrap Table

发表评论

电子邮件地址不会被公开。 必填项已用*标注