bootstrap table - 表格插件
程序员文章站
2022-04-29 10:57:39
...
最近呢，公司要用bootstrap table表格插件做表格，自己之前没接触过，于是仿照别人的copy，但总是copy肯定是不行的呀，于是琢磨了一下。现在就把自己使用bootstrap table使用方法，和大家分享一下。
1、首先百度bootstrap table
百度后，可以看到中文官方地址、英文官方地址等等！
点击第一条信息，下面这一段是进入中文网的介绍！
与一些最广泛使用的CSS框架集成的扩展表。（支持Bootstrap，语义UI，Bulma，Material
Design，Foundation）Bootstrap Table旨在减少开发时间，并且不需要开发人员的特定知识。它既轻量级又功能丰富。
2、对bootstrap table进行了字面的理解，然后进行入门训练。
肯定是点击入门了，上方图片（入门）
2.1、引入CSS、JS文件，添加HTML5 doctype
2.1.1、引入CSS文件时要放到< head></ head>之间
- bootstrap-table.min.css
<link rel="stylesheet" href="https://unpkg.com/aaa@qq.com/dist/bootstrap-table.min.css">
2.1.2、将以下< script>放在页面末尾附近，在结束</ body>标记之前，以启用它们。首先是jQuery，然后是Bootstrap.js，然后是我们的JavaScript插件。
- bootstrap-table.min.js
- bootstrap-table-zh-CN.min.js （中文版的）
<script src="https://unpkg.com/aaa@qq.com/dist/bootstrap-table.min.js"></script>
2.1.3、HTML5 doctype
Bootstrap Table需要使用HTML5 doctype。没有它，你会看到一些时髦的不完整造型。
<!doctype html>
<html lang="en">
...
</html>
3、用法（前两种比较少，一般是JS调用带有id的表）
3.1、通过直接数据添加
<table data-toggle="table">
<thead>
<tr>
<th>Item ID</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
</tr>
</tbody>
</table>
3.2、通过data-url="data1.json"在普通表上设置来使用远程URL数据
首先，设置了data-url添加数据url，用data-field接收数据，即可接收对应字段信息！
<table
data-toggle="table"
data-url="data1.json">
<thead>
<tr>
<th data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
3.3 通过JavaScript调用带有id表的bootstrap Table。
<table id="table"></table>
3.3.1、data数据
$('#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.1.2、url数据
$('#table').bootstrapTable({
url: 'data1.json',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}]
})
$('#table').bootstrapTable({
'data1.json'
method: 'get',
uniqueId: "id",
// queryParams: {code: 'E1300000870000003003'}, //服务器上传参数
cache: false, //是否使用缓存，默认为true
striped: true, //是否显示行间隔色
pagination: true,//显示分页
sortable: true, //排序
//singleSelect: true,
//clickToSelect: true,
sidePagination: "client", // server服务器分页，client前端分页
pageNumber: 1, // 初始化加载第一页
pageSize: 5, // 单页记录数
//下面onClickRow为点击该行的时候获取到该行的行号; 在外边设置index,当点击某一行的时候，再改写该值。
// onClickRow: function (row, $e) {
// let index = $e.data('index');
// },
// pageList: [10, 25], // 可选单页记录数
// showRefresh : true, // 刷新按钮
// showToggle:true, //是否显示详细视图和列表视图的切换按钮
// cardView: true, //是否显示详细视图
columns: [{
field: 'id',
title: '序号',
width: 100,
align: 'center',
sortable: true, // 是否可以调整顺序
formatter: function (value, row, index) {
const pageSize = $("#modOfferTable").bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
const pageNumber = $("#modOfferTable").bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
}
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}]
});
};
注：
<!-- bootstrap-table.min.css -->
<link rel="stylesheet" href="https://unpkg.com/aaa@qq.com/dist/bootstrap-table.min.css">
<!-- bootstrap-table.min.js -->
<script src="https://unpkg.com/aaa@qq.com/dist/bootstrap-table.min.js"></script>
<!-- bootstrap-table-zh-CN.min.js （中文版的） -->
<script src="https://unpkg.com/aaa@qq.com/dist/locale/bootstrap-table-zh-CN.min.js"></script>