下面详细讲解“JS表格组件神器bootstrap table详解（强化版）”的完整攻略。
一、Bootstrap Table介绍
Bootstrap Table是一个强大的在线表格组件，它基于Bootstrap框架进行开发，具有快速、高效、简单易用等优点。Bootstrap Table支持异步加载、本地数据、数据排序、分页、新增和修改数据等多种功能，是高级开发人员的必备利器。
二、Bootstrap Table使用步骤
1. 引入文件
首先需要在页面中引入bootstrap.min.css、jquery.min.js、bootstrap.min.js和bootstrap-table.min.js等文件。
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
2. HTML结构
表格的HTML结构基于Bootstrap，需要创建一个table元素，并添加thead和tbody元素，thead用来定义表格的列名，tbody定义表格的数据。
<table class="table table-striped" id="myTable">
<thead>
<tr>
<th data-field="id">编号</th>
<th data-field="name">姓名</th>
<th data-field="age">年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>小明</td>
<td>20</td>
</tr>
<tr>
<td>002</td>
<td>小红</td>
<td>22</td>
</tr>
<tr>
<td>003</td>
<td>小华</td>
<td>25</td>
</tr>
</tbody>
</table>
3. JS代码
在页面加载完成之后，使用jQuery选择器选择table元素，并调用bootstrapTable()方法初始化表格组件。
$(function (){
$('#myTable').bootstrapTable();
});
4. 完整示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Table示例</title>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<table class="table table-striped" id="myTable">
<thead>
<tr>
<th data-field="id">编号</th>
<th data-field="name">姓名</th>
<th data-field="age">年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>小明</td>
<td>20</td>
</tr>
<tr>
<td>002</td>
<td>小红</td>
<td>22</td>
</tr>
<tr>
<td>003</td>
<td>小华</td>
<td>25</td>
</tr>
</tbody>
</table>
<script src="//cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script>
$(function (){
$('#myTable').bootstrapTable();
});
</script>
</body>
</html>
三、Bootstrap Table常用功能
1. 表格数据设置
bootstrapTable()方法可以传入一个options对象参数，用于设置表格的属性和样式。
$('#myTable').bootstrapTable({
url: 'data.json', // 数据来源
method: 'post', // 请求方式
dataType: 'json', // 数据类型
striped: true, // 斑马线效果
pagination: true, // 分页
pageSize: 10, // 每页大小
pageNumber: 1, // 当前页码
search: true, // 搜索
showRefresh: true, // 刷新
toolbar: '#toolbar', // 工具栏
columns: [{
field: 'id',
title: '编号'
}, {
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}]
});
2. 表格数据来源
Bootstrap Table支持异步加载和本地数据两种方式获取表格数据。
2.1 异步加载
如果需要从服务器获取数据，只需要在options对象中设置url属性和method属性，Bootstrap Table会自动从后端获取数据，并渲染到页面中。
$('#myTable').bootstrapTable({
url: 'data.json',
method: 'post',
dataType: 'json',
columns: [{
field: 'id',
title: '编号'
}, {
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}]
});
2.2 本地数据
如果需要使用本地数据，只需要在options对象中设置data属性为一个数组，数组中包含需要渲染到表格中的数据。
$('#myTable').bootstrapTable({
data: [{
id: '001',
name: '小明',
age: 20
}, {
id: '002',
name: '小红',
age: 22
}, {
id: '003',
name: '小华',
age: 25
}],
columns: [{
field: 'id',
title: '编号'
}, {
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}]
});
3. 表格样式设置
Bootstrap Table提供了多种表格样式，如斑马线效果、鼠标移动到行上高亮显示等。
$('#myTable').bootstrapTable({
striped: true, // 斑马线效果
hover: true, // 鼠标移动高亮
height: 500, // 表格高度
columns: [{
field: 'id',
title: '编号'
}, {
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}]
});
4. 表格分页设置
如果表格中有大量数据，可以使用分页功能进行分页显示。
$('#myTable').bootstrapTable({
url: 'data.json',
method: 'post',
dataType: 'json',
pagination: true, // 分页
pageSize: 10, // 每页大小
pageNumber: 1, // 当前页码
pageList: [10, 20, 30], // 可选的每页大小
columns: [{
field: 'id',
title: '编号'
}, {
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}]
});
5. 表格搜索设置
如果表格中有大量数据，可以使用搜索功能进行快速搜索。
$('#myTable').bootstrapTable({
url: 'data.json',
method: 'post',
dataType: 'json',
search: true, // 搜索
searchText: '', // 搜索默认文本
columns: [{
field: 'id',
title: '编号'
}, {
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}]
});
6. 表格排序设置
如果需要对表格数据进行排序，只需要在options对象中设置sortable属性为true即可。
$('#myTable').bootstrapTable({
url: 'data.json',
method: 'post',
dataType: 'json',
sortable: true, // 排序
sortOrder: 'desc', // 排序方式
columns: [{
field: 'id',
title: '编号'
}, {
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}]
});
四、Bootstrap Table常用API
Bootstrap Table提供了丰富的API接口，可以实现更多复杂的功能。
1. Refresh
refresh方法用于刷新表格。
$('#myTable').bootstrapTable('refresh');
2. Load
load方法用于异步加载数据。
$('#myTable').bootstrapTable('load', 'data.json');
3. GetSelections
getSelections方法用于获取选中的行数据。
var rows = $('#myTable').bootstrapTable('getSelections');
4. Select
select方法用于选中一行数据。
$('#myTable').bootstrapTable('select', 1);
5. Unselect
unselect方法用于取消选中。
$('#myTable').bootstrapTable('unselect', 1);
6. Append
append方法用于追加数据。
$('#myTable').bootstrapTable('append', [{
id: '004',
name: '小明',
age: 30
}, {
id: '005',
name: '小红',
age: 28
}]);
五、示例
1. 异步加载
以下示例使用异步加载展示table的数据。在html结构中要注意加入table元素的头部和主体部分，用于设置表头和表体数据的列和行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Table示例</title>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<table class="table table-striped" id="myTable">
<thead>
<tr>
<th data-field="id">编号</th>
<th data-field="name">姓名</th>
<th data-field="age">年龄</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="//cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script>
$(function (){
$('#myTable').bootstrapTable({
url: 'data.json',
method: 'post',
dataType: 'json',
striped: true,
pagination: true,
pageSize: 10,
pageNumber: 1,
search: true,
showRefresh: true,
toolbar: '#toolbar',
columns: [{
field: 'id',
title: '编号'
}, {
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}]
});
});
</script>
</body>
</html>
2. 本地数据
以下示例使用本地数据展示table的数据。在html结构中要注意加入table元素的头部和主体部分，用于设置表头和表体数据的列和行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Table示例</title>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<table class="table table-striped" id="myTable">
<thead>
<tr>
<th data-field="id">编号</th>
<th data-field="name">姓名</th>
<th data-field="age">年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>小明</td>
<td>20</td>
</tr>
<tr>
<td>002</td>
<td>小红</td>
<td>22</td>
</tr>
<tr>
<td>003</td>
<td>小华</td>
<td>25</td>
</tr>
</tbody>
</table>
<script src="//cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script>
$(function (){
$('#myTable').bootstrapTable({
data: [{
id: '001',
name: '小明',
age: 20
}, {
id: '002',
name: '小红',
age: 22
}, {
id: '003',
name: '小华',
age: 25
}],
columns: [{
field: 'id',
title: '编号'
}, {
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}]
});
});
</script>
</body>
</html>
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS表格组件神器bootstrap table详解（强化版） - Python技术站
微信扫一扫 
支付宝扫一扫 