Bootstrap表格插件Bootstrap Table
最近公司有个项目需要把数据库的数据展示出来方便查看和分析。这个需求主要是显示数据和搜索，加一些简单的事件来处理，还有点就是要快。既然就这一个简单的功能，大概就一个页面，准备用Bootstrap 框架快速页面布局，方便后面随时修改。Bootstrap 默认的表格是很简陋的，并不能完成这个需求。在网上搜索无意中找到Bootstrap Table。Bootstrap Table可以很好的和Bootstrap结合。文档和例子很全面。功能也很丰富。下面雷雪松就简单的介绍一下Bootstrap Table的使用技巧。
1、引入Bootstrap、Font Awesome、jQuery和Bootstrap Table，最简单模板如下：
[cc lang=”html” escaped=”true”]
<!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>
[/cc]
2、定义一个容器，并且配置Bootstrap Table的参数。通过data属性或JavaScript以表格格式显示数据。本文主要使用JavaScript的方式来配置。data属性的配置可以直接用data-配置项。Bootstrap Table的数据来源，主要分两种，一种是本地数据源，一种是从服务端获取。分页、查询、排序等都和这个有关系。
[cc lang=”html” escaped=”true”]
<table id=”table”></table>
[/cc]
[cc lang=”javascript” escaped=”true”]
$(‘#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’
}]
})
[/cc]
3、自定义传给服务端的参数，可以通过queryParams参数来配置。
[cc lang=”javascript” escaped=”true”]
queryParams: function(params) { //上传服务器的参数
var temp = { //如果是在服务器端实现分页，limit、offset这两个参数是必须的
page: params.pageNumber, //当前页码
pageSize: params.pageSize, //每页条数
};
return temp
}
[/cc]
4、Bootstrap Table修改配置，重新生成表格可以先destroy销毁，然后再重新配置。
[cc lang=”javascript” escaped=”true”]
$(‘#table’).bootstrapTable(‘destroy’).bootstrapTable({
……//省略的其他配置
})
[/cc]
5、Bootstrap Table导入导出，可以引入tableExport.min.js和bootstrap-table-export来实现。然后在配置中设置导出的类型和数据。
[cc lang=”javascript” escaped=”true”]
$(‘#table’).bootstrapTable({
…//省略的其他配置
showExport: true,//显示导出按钮
exportDataType: ‘all’,//导出所有(all)，默认为当前页（basic），也可以设置导出选中的(elected)。
exportTypes: [‘csv’],//导出格式为csv
})
[/cc]
6、Bootstrap Table设置为中文，直接引入dist/locale/bootstrap-table-zh-CN.min.js即可。
以上是雷雪松对Bootstrap Table的相关用法的讲解。如果希望更加深入的使用Bootstrap Table，可以去Bootstrap Table的官网：https://bootstrap-table.com/查看更详细的API。