Overview(bootstrap-table概述)
官网网址:https://bootstrap-table.com/
Bootstrap表的设计目的是减少开发时间,并且不需要开发人员提供特定的知识。它重量轻,功能丰富
且与一些最广泛使用的CSS框架集成。(支持Bootstrap,语义UI, Bulma, Material Design, Foundation)
Quick start(快速引入插件)
bootstrap-table需要bootstrapV4版本的支持所以html必须要先引入bootstrapV4相关内容
引入bootstrapV4(下面是通过CDN的方式引入的,也可以通过本地下载好引入本地的JS和CSS)
CSS
把下面这段css的样式放在页面的<head></head>
标签中
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
JS
把下面这段JS的样式放在页面的</body>
标签之后,由于Bootstrap依赖了 jQuery, Popper.js所以需要先引入这两个的JS
注:jquery-3.3.1.slim.min.js这个好像没有$.ajax的函数所以需要换成jquery.min.js
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Starter template
引入CSS和JS后页面该有的格式:
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
引入bootstrap-table(下面是通过CDN的方式引入的,也可以通过本地下载好引入本地的JS和CSS)
CSS
把下面这段css的样式放在页面的<head></head>
标签中且要先引入BootstrapV4的样式
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css">
JS
把下面这段JS的样式放在页面的</body>
标签之后且要先引入BootstrapV4的JS
<script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
Starter template
由于Bootstrap v4使用了字体Awesome作为默认图标,因此需要导入字体Awesome链接
下面就是引入bootstrap-table应该要有的格式:
<!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.14.2/dist/bootstrap-table.min.css">
</head>
<body>
<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>
<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.14.2/dist/bootstrap-table.min.js"></script>
</body>
</html>
Download Source code(如何下载源代码)
Source code
源码下载地址
通过上面的下载地址可以下载bootstrap-table的源码
Contents
Precompiled Bootstrap Table(预编译的内容格式)
bootstrap-table/
└── dist/
├── extensions/
├── locale/
├── bootstrap-table-locale-all.js
├── bootstrap-table-locale-all.min.js
├── bootstrap-table.css
├── bootstrap-table.min.css
├── bootstrap-table.js
└── bootstrap-table.min.js
dist/文件夹包含用src/编译和缩小的所有内容。为了便于使用,我们还将所有locale文件编译为一个文件bootstrap-table-local -all.js
Source Code(源码的内容格式)
bootstrap-table/
├── site/
└── src/
├── extensions/
├── locale/
├── bootstrap-table.css
└── bootstrap-table.js
src/、locale/和extensions/是我们的CSS、JS的源代码。站点/文件夹包含文档的源代码。除此之外,任何其他包含的文件都提供了对包、许可证信息和开发的支持
Usage(表中数据的几种赋值方式)
1.Via data attributes(不使用JS赋值)
- 直接在通过html写死值
<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>
- 在通过html中引入bootstrap-table的属性
下面这段代码是通过data-url=“data1.json"
来赋值的,data1.json可以是后台的一个requestMapping
,也可以直接是static下的静态json格式文件
,内容要符合"[{'name':'abc','age':'18'},{'name':'abc','age':'17'}]
"这中格式
<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>
你也可以通过设置属性pagination, search, sorting
来控制表格是否需要分页,搜索,排序
等功能,其他功能属性可以阅读API
:
<table
data-toggle="table"
data-url="data1.json"
data-pagination="true"
data-search="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>
2.Via JavaScript(通过JS赋值)
html中表的代码:
<table id="table"></table>
JS控制代码:
$('#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'
}]
})
也可以通过url, pagination, search, sorting
来通过不同方式赋值
和控制是否需要分页,搜索,排序
等功能:
$('#table').bootstrapTable({
url: 'data1.json',
pagination: true,
search: true,
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}]
})
API
Table Options
下面是height
属性的描述,其他属性和这是一样的套路:
height
Attribute: data-height
Type: Number
Detail:
The height of table, enable fixed header of table.
Default: undefined
Example: Table Height
height [属性名称]
- Attribute: data-height
[在代码中引入的名称]
- Type: Number
[这个属性值的类型]
- Detail:
[这个属性具体的作用描述]
The height of table, enable fixed header of table. - Default: undefined
[默认的值]
- Example: Table Height
[案例]
这个属性在代码中的引入:
<link href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
<table
id="table"
data-toggle="table"
data-height="460"
data-url="json/data1.json">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
Column Options
title
属性的描述:
title
Attribute: data-title
Type: String
Detail:
The column title text.
Default: undefined
title [属性名称]
- Attribute: data-title
[在代码中引入的名称]
- Type: String
[这个属性值的类型]
- Detail:
[这个属性具体的作用描述]
The column title text. - Default: undefined
[默认的值]
这个属性在代码中的引入:
$('#table').bootstrapTable({
url: 'data1.json',
pagination: true,
search: true,
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}]
})
Events
事件的描述:
onCheck
jQuery Event: check.bs.table
Parameter: row, $element
Detail:
Fires when user check a row, the parameters contain:
row: the record corresponding to the clicked row.
$element: the DOM element checked.
onCheck [事件的名称]
- jQuery Event: check.bs.table
[jquery中使用的名称]
- Parameter: row, $element
[事件参数]
- Detail:
[参数和作用的具体描述]
Fires when user check a row, the parameters contain:- row: the record corresponding to the clicked row.
- $element: the DOM element checked.
事件的使用有两种方式
1.通过使用事件的名称:
$(’#table’).bootstrapTable({
onEventName: function (arg1, arg2, …) {
// …
}
})
eg:
$('#table').bootstrapTable({
onCheck : function (arg1, arg2, ...) {
// ...
}
})
2.通过使用jquery中使用的名称:
$(’#table’).on(‘event-name.bs.table’, function (e, arg1, arg2, …) {
// …
})
eg:
$('#table').on('check.bs.table', function (e, arg1, arg2, ...) {
// ...
})
Methods
方法的使用方式:$('#table').bootstrapTable('method', parameter)
eg:
getAllSelections
Parameter: undefined
Detail:
Return all selected rows contain search or filter, when no record selected, an empty array will return.
getAllSelections [方法名称]
- Parameter: undefined
[参数]
- Detail:
[这个方法的具体描述,返回值等等]
Return all selected rows contain search or filter, when no record selected, an empty array will return.
引用getAllSelections 这个方式是没有参数的,返回一个数组:
var array = `$('#table').bootstrapTable('getAllSelections')`
Extensions(bootstrap-table扩张)
Examples(bootstrap-table案例)
其实很多功能在这个案例里面都可以找到的
具体描述地址