一、引用及基本样式
1.在bootstrap-table官网或其他途径下载bootstrap-table.js包，也可以使用连接引用
所需要引用的文件
//css样式文件
<link rel="stylesheet" href="../css/bootstrap-table.css" />
//bootstrap-table js文件
<script src="cockpit/js/bootstrap-table.js"></script>
//bootstrap-table 汉化文件，将前端显示的提示文字都转换成汉语，如果用户都使用英语可以不引用
<script src="cockpit/js/bootstrap-table-zh-CN.js"></script>
使用连接引用
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
2.基本样式，直接粘贴官网的样例
<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.实际使用样例
实际使用中很少会用基本样例中的写法，毕竟数据很少有写死的，下面算是一个模板，我也是在其他帖子中找到的
function InitMainTable () {
4 //记录页面bootstrap-table全局变量$table，方便应用
5 var queryUrl = '/TestUser/FindWithPager?rnd=' + Math.random()
6 $table = $('#grid').bootstrapTable({
7 url: queryUrl, //请求后台的URL（*）
8 method: 'GET', //请求方式（*）
9 //toolbar: '#toolbar', //工具按钮用哪个容器
10 striped: true, //是否显示行间隔色
11 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
12 pagination: true, //是否显示分页（*）
13 sortable: true, //是否启用排序
14 sortOrder: "asc", //排序方式
15 sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
16 pageNumber: 1, //初始化加载第一页，默认第一页,并记录
17 pageSize: rows, //每页的记录行数（*）
18 pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
19 search: false, //是否显示表格搜索
20 strictSearch: true,
21 showColumns: true, //是否显示所有的列（选择显示的列）
22 showRefresh: true, //是否显示刷新按钮
23 minimumCountColumns: 2, //最少允许的列数
24 clickToSelect: true, //是否启用点击选中行
25 //height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
26 uniqueId: "ID", //每一行的唯一标识，一般为主键列
27 showToggle: true, //是否显示详细视图和列表视图的切换按钮
28 cardView: false, //是否显示详细视图
29 detailView: false, //是否显示父子表
30 //得到查询的参数
31 queryParams : function (params) {
32 //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
33 var temp = {
34 rows: params.limit, //页面大小
35 page: (params.offset / params.limit) + 1, //页码
36 sort: params.sort, //排序列名
37 sortOrder: params.order //排位命令（desc，asc）
38 };
39 return temp;
40 },
41 columns: [{
42 checkbox: true,
43 visible: true //是否显示复选框
44 }, {
45 field: 'Name',
46 title: '姓名',
47 sortable: true
48 }, {
49 field: 'Mobile',
50 title: '手机',
51 sortable: true
52 }, {
53 field: 'Email',
54 title: '邮箱',
55 sortable: true,
56 formatter: emailFormatter
57 }, {
58 field: 'Homepage',
59 title: '主页',
60 formatter: linkFormatter
61 }, {
62 field: 'Hobby',
63 title: '兴趣爱好'
64 }, {
65 field: 'Gender',
66 title: '性别',
67 sortable: true
68 }, {
69 field: 'Age',
70 title: '年龄'
71 }, {
72 field: 'BirthDate',
73 title: '出生日期',
74 formatter: dateFormatter
75 }, {
76 field: 'Height',
77 title: '身高'
78 }, {
79 field: 'Note',
80 title: '备注'
81 }, {
82 field:'ID',
83 title: '操作',
84 width: 120,
85 align: 'center',
86 valign: 'middle',
87 formatter: actionFormatter
88 }, ],
89 onLoadSuccess: function () {
90 },
91 onLoadError: function () {
92 showTips("数据加载失败！");
93 },
94 onDblClickRow: function (row, $element) {
95 var id = row.ID;
96 EditViewById(id, 'view');
97 },
98 });
99 };
二、异步请求数据
上面说了，很少有写死的，我常用的是直接从数据库提取的数据，后端就不写了，就是查询表所需的内容提取出来，通过Ajax将数据传到前端。
//这里是在表单中增加了一列附件地址的填入，看实际需求
function actionFormatter(value){
return '<a href="'+ value +'" target="_blank" style="color:'+"#ffffff"+'">附件</a>'
}
//这里是对column进行一个CSS设置，也可以不用单独提出来，看实际需求
function headerStyleFnf(column) {
return {
id: {
css: { padding: '0.05rem' }
},
Model: {
css: { padding: '0.05rem' }
},
defect: {
css: { padding: '0.05rem' }
},
DEPARTMENT: {
css: { padding: '0.05rem' }
},
tally: {
css: { padding: '0.05rem' }
},
// 附件地址:{
// css:{padding:'8px'}
// }
}[column.field]
}
function ajaxV2List() {
$('#table-V2List').bootstrapTable({
url: "/api/cockpit/v2querytable", //请求地址，路由地址
onLoadSuccess: function () { //加载成功时执行
console.info("加载成功V2");
// console.log(this.result,111)
},
onLoadError: function () { //加载失败时执行
console.info("加载数据失败V2");
},
method: 'post', //请求方式（*）根据需要自行处理方法，此处使用get
async: true, //true表示执行到这,ajax向后台发起访问,在等待响应的这段时间里,继续执行下面的代码
//设置为true,基本都是后面的代码(除非还有ajax)先执行
// toolbar: '#toolbar', //工具按钮用哪个容器
striped: false, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
paginationPreText: '<', //上一页按钮样式
paginationNextText: '>', //下一页按钮样式
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 15, //每页的记录行数（*）
pageList: [10, 15, 20, 25], //可供选择的每页的行数（*）
paginationParts: ['pageList'], //['pageInfo','pageInfoShort','pageSize','pageList']
contentType: "application/x-www-form-urlencoded", //重要选项,必填
sortable: false, //是否启用排序
// sortName: "curmsindex", //是否启用排序
// sortOrder: "desc", //排序方式
showColumns: false, //是否显示所有的列
showRefresh: false, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: false, //是否启用点击选中行
headerStyle: headerStyleFnf, //应用前面的column设置
// height: '240', //行高，如果没有设置height属性，表格自动根据记录条数决定表格高度,最好不要设置这个属性
uniqueId: "id", //每一行的唯一标识，一般为主键列
showToggle: false, //是否显示详细视图和列表视图的切换按钮
showExport: false,
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
//参数参考https://zhuanlan.zhihu.com/p/46609913，根据需要自行处理
//这里开始是数据传参的关键，将options中的参数传给后端，再得到相应的值，作用类似Ajax中的data
//如果不需要传参，可以不用写
queryParams: function (params) {
// //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
var temp = options
return temp;
},
columns: [
//自动添加序号
{
field: 'id',
title: '序号Nr',
visible: true,
sortable: false,
formatter: function (value, row, index) {
//获取每页显示的数量
var pageSize = $('#table-V2List').bootstrapTable('getOptions').pageSize;
//获取当前是第几页
var pageNumber = $('#table-V2List').bootstrapTable('getOptions').pageNumber;
//返回序号，注意index是从0开始的，所以要加上1
return index + 1;
}
},
{
//field对应的是数据库中所需要的字段名
//title是在前端页面中显示的名
field: 'Model',
title: '模块',
fontSize: '1rem',
// visible: true,
// sortable: false
}, {
field: 'defect',
title: '重点问题 Defect',
// visible: true,
// sortable: false
}, {
field: 'DEPARTMENT',
title: '部门 Dept',
// visible: true,
// sortable: false
}, {
field: 'tally',
title: '数量',
// visible: true,
// sortable: true
},
//这里设置了链接，可以点入链接的地址
// {
// field: '附件地址',
// title: '附件ATT',
// align: 'center',
// valign: 'middle',
// formatter: actionFormatter // 可以参考https://examples.bootstrap-table.com/#column-options/formatter.html#view-source
// // 或者参考 https://examples.bootstrap-table.com/#column-options/events.html#view-source 设置 events
// },
]
});
};
做到这里，其实已经可以正常使用了
三、样式设置
实际使用中会有一些样式需求与默认设置不同，比如说背景色是深色，文字颜色要变成白色的这种，下面我写几个常用的设置
其余的样式设置可以自行参考官网的内容
PS：我不清楚是我电脑的原因还是官网的原因，Bootstrap Table中文网例子我看不了代码样例，需要在Bootstrap Table英文官网相对应的进行查看
//table-hover是对应的class类名，这里设置了表单的大小
.table-hover {
height: 7rem;
width: 9rem;
}
//这里设置了表单的边框颜色，粗细，和padding值
.table-bordered tr,
td,
th {
border: 1px solid black;
/* 整体表格边框 */
padding: 0.025rem 0.025rem 0.025rem 0.1rem ;
}
//这里设置了表单page页标签的字体颜色，边框，背景色
.page-link {
// background: none;
color: black;
border: 1px solid black;
}
6746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
