bootstrap-table使用总结
bootstrap-table基本介绍
在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。
数据显示方式
Bootstrap-Table显示数据到表格的方式有两种，一种是客户端（client）模式，一种是服务器（server）模式。
客户端模式：指的是在服务器中把要显示到表格的数据一次性加载出来，然后转换成JSON格式传到要显示的界面中，客户端模式较为简单，它是把数据一次性加载出来放到界面上，然后根据你设置的每页记录数，自动生成分页。当点击第二页时，会自动加载出数据，不会再向服务器发送请求。同时用户可以使用其自带的搜索功能，可以实现全数据搜索。对于数据量较少的时候，可以使用这个方法。
服务器模式：指的是根据设定的每页记录数和当前要显示的页码，发送数据到服务器进行查询，然后再显示到表格中。该方法可以根据用户的需要动态的加载数据，节省了服务器的资源，在进行查询时，会发送一次的查询请求到服务器端进行查询，根据服务器端返回结果加载页面。
相关依赖
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>
bootstrap-table 使用
HTML代码：
<table id="myTable" class="table table-hover text-nowrap"></table>
json数据:
{
"message": "查询成功",
"code": "200",
"data": [{
"id": "1",
"blogUrl": "https://www.sojson.com/",
"blogWorkName": "2",
}]
}
服务器前端分页JS代码加载表格内容：
$('#myTable').bootstrapTable({
method: 'post', //以post的方式发送请求
url: url, //url地址，可以是接口也可以是本地json文件
striped: true, // 是否显示行间隔色
pageNumber: 1, // 初始化加载第一页
pagination: true, // 是否分页
sortable: true, //是否可排序
search: true, //是否可查询
showColumns: true, //筛选要显示的列
showSearchClearButton: true, //显示搜索清除按钮
pageSize: 10, // 默认单页记录数
pageList: [10, 15, 20], //分页可选页数
sidePagination: "client", //表示客户端请求
clickToSelect: true, //是否启用点击选中行
//height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "id", //每一行的唯一标识，一般为主键列
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
onLoadSuccess: function(){ //加载成功时执行
layer.msg("加载成功");
},
onLoadError: function(){ //加载失败时执行
layer.msg("加载数据失败", {time : 1500, icon : 2});
},
responseHandler:function(res){
//在ajax获取到数据，渲染表格之前，修改数据源
//该项返回的为数据源内的二级列表data
if (res.code == "200"){
return res.data;
}else {
//显示报错信息
layer.msg(res.message, {time : 1500, icon : 2});
}
},
paginationLoop: true, //换页按钮设置
paginationHAlign: 'left',
paginationDetailHAlign: 'right',
paginationPreText: '上一页',
paginationNextText: '下一页',
columns: [{
checkbox: true //左侧复选框，用于多选操作
}, {
title: '博客ID', //表头名称
field: 'id', //该列填充的数据
align: 'center', //数据内容居中
},{
title: '博客链接',
field: 'blogUrl',
//列表显示的是“原文链接”字样的可点击链接
formatter: function (value, row, index) {
var result = "";
result += '<a style="color: #0a53be" href="'+value+'">原文链接</a>';
return result;
},
align: 'center',
}, {
title: '博客名',
field: 'blogWorkName',
align: 'center',
}
]
});
样式：
与客户端分页不同，服务器端分页需要通过queryParams设置分页查询的参数，sidePagination的值为server。
服务器端分页JS代码加载表格内容:
$('#myTable').bootstrapTable({
method: 'post', //以post的方式发送请求
url: url, //url地址，可以是接口也可以是本地json文件
striped: true, // 是否显示行间隔色
pageNumber: 1, // 初始化加载第一页
pagination: true, // 是否分页
sortable: true, //是否可排序
search: true, //是否可查询
showColumns: true, //筛选要显示的列
showSearchClearButton: true, //显示搜索清除按钮
pageSize: 10, // 默认单页记录数
pageList: [10, 15, 20], //分页可选页数
sidePagination: "server", //表示服务端请求
contentType: "application/x-www-form-urlencoded",//必须要有，请求数据格式
queryParamsType : "undefined", //设置请求数据类型
queryParams: function queryParams(params) { //设置请求数据
var param = {
pageNum: params.pageNumber, //服务器端分页所需要的的两个参数
pageSize: params.pageSize,
sort: params.sort, //排序列名
sortOrder: params.order //排位命令（desc，asc）
};
return param;
},
onLoadSuccess: function(){ //加载成功时执行
layer.msg("加载成功");
},
onLoadError: function(){ //加载失败时执行
layer.msg("加载数据失败", {time : 1500, icon : 2});
},
responseHandler:function(res){
//在ajax获取到数据，渲染表格之前，修改数据源
//该项返回的为数据源内的二级列表data
if (res.code == "200"){
return res.data;
}else {
//显示报错信息
layer.msg(res.message, {time : 1500, icon : 2});
}
},
paginationLoop: true, //换页按钮设置
paginationHAlign: 'left',
paginationDetailHAlign: 'right',
paginationPreText: '上一页',
paginationNextText: '下一页',
columns: [{
checkbox: true //左侧复选框，用于多选操作
}, {
title: '博客ID', //表头名称
field: 'id', //该列填充的数据
align: 'center', //数据内容居中
},{
title: '博客链接',
field: 'blogUrl',
//列表显示的是“原文链接”字样的可点击链接
formatter: function (value, row, index) {
var result = "";
result += '<a style="color: #0a53be" href="'+value+'">原文链接</a>';
return result;
},
align: 'center',
}, {
title: '博客名',
field: 'blogWorkName',
align: 'center',
}，{
field: 'operate',
title: '操作',
align: 'center',
valign: 'middle',
events: { //id为edit的按钮的点击事件。
'click #edit': function (e, value, row, index) {
editInfo(row.id);
},
},
formatter: function (value, row, index) {
var result = "";
result += '<button id="edit" class="btn btn-info" data-toggle="modal" data-target="#editModal">修改</button>';
return result;
}
}
]
});
当后端传给前端的数据有着多重嵌套时，简单的返回二级数组中的数据显然不能满足我们的需求，我们可以对数据进行进一步处理，将所要的数据放在一个新建对象数组中：
responseHandler:function(res){
if (res.code == "200"){
var userInfo = res.data;
var NewData = [];
if (userInfo.length){
for (var i = 0; i < userInfo.length; i++){
var dataNewObj = { //自己定义的一个对象，用于存放数据
"id": '',
"username": '',
"classId": '',
"score": '',
};
dataNewObj.id = userInfo[i].user.account; //取出data[i]中的user元素中的account元素的值
dataNewObj.username = userInfo[i].user.userName;
dataNewObj.classId = userInfo[i].user.classRoom.className;
dataNewObj.score = userInfo[i].score.score;
NewData.push(dataNewObj); //将对象存到数组中
}
}
var data = {
rows:NewData,
};
return data;
}else {
layer.msg(res.message, {time : 1500, icon : 2});
return false;
}
},
遇到的问题和解决
- 问题描述：一开始使用时，不知道在responseHandler中对后端的数据进行处理，导致列表的排序存在问题。比如同一级的多个数据进行显示时，点击排序会将多列进行排序，而且排序的顺序并不是我们想要的顺序，显得有点杂乱无章。
解决方法：通过在responseHandler中对数据进行处理，将所要的数据封装在同一个类里面，就可以实现各个数据排序上的独立。需要新建一个类来存储所要的数据，对类的元素进行对应的命名，在columns中对数据进行加载时，field用的是类中的元素名。将类放入数组中，我们把它命名为myData，返回的数据为键值对的rows：myData。 - 问题描述：想要在表格中显示按钮、链接等一些自己定义的内容，或者根据填充数据的内容来显示更容易理解的数据样式等。
解决方法:columns是我们用来加载表格数据内容的东西，要显示不同的内容，也是在这个地方进行修改。在该列内容填充中加入如下方法，就是对显示数据进行处理，使得显示的内容为“原文链接”，而不是一个链接字符串，使得显示更美观。
formatter: function (value, row, index) {
var result = "";
result += '<a style="color: #0a53be" href="'+value+'">原文链接</a>';
return result;
},
总结
bootstrap-table的使用总体上是比较简单的，他为我们封装了很多的功能方法，只需要一句语句就能对一个功能进行开关，只要我们在使用时查看官方文档，基本上就能对数据以列表的形式进行显示。较为麻烦，也是难度较高的就是对数据的处理了，不管是在responseHandler中对数据的加工还是columns中对数据显示的处理都是我们经常使用的，因此对这部分的掌握也更为重要。
