bootstraptable框架详细讲解（源码讲解如何实现BootstrapTable静态赋值）
bootstraptable框架详细讲解（源码讲解如何实现BootstrapTable静态赋值）这是一开始进入页面加载的表格。在table上方添加了文本输入框，用于查询过滤table中的数据，因此需要根据查询条件，重新向后台向DAO层发送请求，返回新的结果。最重要的一点，写在最前面：BootstrapTable一个页面只能加载一次；想要重新加载，就必须先销毁 ， 再重新初始化Bootstraptable。销毁的方法：$('#id').bootstrapTable('destroy');好了，接下来我们来看以以下具体实现方式
今天要做一个报表导入并预览的功能，使用layui的文件上传，获取表格数据，接着把表格数据返回前台，使用bootstraptable展示，实现一个预览表格数据的效果。通过后台处理后的数据bootstraptable加载数据，其实具体实现不难，今天要讲的是在实现数据加载之后，我们出现了一些问题，我会附源码讲解问题的解决方案分享给大家
通过后台处理后的数据// 数据经过处理后 真实数据已做修改
Data = [
{JJSRBY: 6666 JJSRBYLJ: 155666 JJZCBY: 777 JJZCBYLJ: 2266633 LJJY: 151515 NCYE: 121212 SZYEBY: 11111 SZYEBYLJ: -11559 XZ: "企业职工基本养老保险" ZFNL: 22.1}
{JJSRBY: 6666 JJSRBYLJ: 155666 JJZCBY: 777 JJZCBYLJ: 2266633 LJJY: 151515 NCYE: 121212 SZYEBY: 11111 SZYEBYLJ: -11559 XZ: "工伤保险" ZFNL: 22.1}
...
];bootstraptable加载数据
// field 需要和 Data中每个对象中的字段名对应。
//
$('#previewTable').bootstrapTable({
data : Data
//toolbar: '#toolBar'
striped: true //是否显示行间隔色
cache: false //是否使用缓存，默认为true，
//minimumCountColumns: 2 //最少允许的列数
clickToSelect: true //是否启用点击选中行
columns: [
[
{field : 'XZ' title: '险种' rowspan:2 align:"center"}
{field : 'NCYE' title: '年初余额' rowspan:2 halign:"center" align:"right"
formatter: function(value row index) {
let num = row.NCYE;
return num.toFixed(2);
}
}
{title: '基金收入' colspan:2 align:"center"}
{title: '基金支出' colspan:2 align:"center"}
{title: '当年收支结余' colspan:2 align:"center"}
{field : 'LJJY' title:'累计结余' rowspan:2 halign:"center" align:"right"
formatter: function(value row index) {
let num = row.LJJY;
return num.toFixed(2);
}
}
{field : 'ZFNL' title: '支付能力(月)' rowspan:2 halign:"center" align:"right"
formatter: function(value row index) {
let num = row.ZFNL;
return num.toFixed(1);
}
}
]
[
{field : 'JJSRBY' title:'本月' colspan:1 halign:"center" align:"right"
formatter: function(value row index) {
let num = row.JJSRBY;
return num.toFixed(2);
}
}
{field : 'JJSRBYLJ' title:'本月止累计' colspan:1 halign:"center" align:"right"
formatter: function(value row index) {
let num = row.JJSRBYLJ;
return num.toFixed(2);
}
}
{field : 'JJZCBY' title:'本月' colspan:1 halign:"center" align:"right"
formatter: function(value row index) {
let num = row.JJZCBY;
return num.toFixed(2);
}
}
{field : 'JJZCBYLJ' title:'本月止累计' colspan:1 halign:"center" align:"right"
formatter: function(value row index) {
let num = row.JJZCBYLJ;
return num.toFixed(2);
}
}
{field : 'SZYEBY' title:'本月' colspan:1 halign:"center" align:"right"
formatter: function(value row index) {
let num = row.SZYEBY;
return num.toFixed(2);
}
}
{field : 'SZYEBYLJ' title:'本月止累计' colspan:1 halign:"center" align:"right"
formatter: function(value row index) {
let num = row.SZYEBYLJ;
return num.toFixed(2);
}
}
]
]
formatNoMatches : function() {
return '<div style="color: #b8b8b8; height: 15px;"> 暂无数据 </div>';// 如果无数据则显示这个
}
});
这个实现其实不难，但是，没想到的是，接下来的步骤出问题了，因为我们需要实现BootstrapTable重新加载，这种问题有以下两种解决方案：
原始加载的表格
解决后加载表格
最重要的一点，写在最前面：BootstrapTable一个页面只能加载一次；想要重新加载，就必须先销毁 ， 再重新初始化Bootstraptable。
销毁的方法：
$('#id').bootstrapTable('destroy');
好了，接下来我们来看以以下具体实现方式
遇到此问题的情景
在table上方添加了文本输入框，用于查询过滤table中的数据，因此需要根据查询条件，重新向后台向DAO层发送请求，返回新的结果。
解决办法原始加载的表格这是一开始进入页面加载的表格。
$('#infoList').bootstrapTable({
url: '${pageContext.request.contextPath}/xx/xxx' //请求后台的URL（*）
method: 'post' //请求方式（*）
contentType: 'application/x-www-form-urlencoded'
toolbar: '#toolbar' //工具按钮用哪个容器
striped: true //是否显示行间隔色
cache: false //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true //是否显示分页（*）
sortable: false //是否启用排序
sortOrder: "desc" //排序方式
sidePagination: "server" //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1 //初始化加载第一页，默认第一页
pageSize: 10 //每页的记录行数（*）
pageList: [10 50 100] //可供选择的每页的行数（*）
strictSearch: true
showColumns: false //是否显示所有的列
showRefresh: false //是否显示刷新按钮
minimumCountColumns: 2 //最少允许的列数
clickToSelect: true //是否启用点击选中行
//uniqueId: "aac147" //每一行的唯一标识，一般为主键列
showToggle: false //是否显示详细视图和列表视图的切换按钮
cardView: false //是否显示详细视图
detailView: false //是否显示父子表
queryParams: queryParams //所需要的参数
queryParamsType: "limit" //参数格式 发送标准的RESTFul类型的参数请求
columns: myColumns // 列名这里通过别处方法加载
onClickRow: function (row obj) { //点击事件
...
}
onLoadSuccess: function (data) {
...
}
});
function queryParams(params) { //配置参数
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
pageSize: params.limit //页面大小
pageNumber: (params.offset / params.limit) 1 //页码
};
return temp;
}
1234567891011121314151617181920212223242526272829303132333435363738394041
想要实现的效果：
此时我需要在表格上方，加上文本输入框，并添加 查询按钮 ，点击查询按钮，把输入的条件加入到 表格参数 queryParams 中，通过数据库的查询 返回数据，并更改表格结构和内容，做到重新加载的效果。
但是失败了。
解决后加载表格需要在点击查询按钮时，首先调用 表格销毁方法
$('#infoList').bootstrapTable('destroy');
接着再重新加载新的表格：
$('#infoList').bootstrapTable({
url: '${pageContext.request.contextPath}/xx/xxx2' //请求后台的URL（*）
method: 'post' //请求方式（*）
contentType: 'application/x-www-form-urlencoded'
toolbar: '#toolbar' //工具按钮用哪个容器
striped: true //是否显示行间隔色
cache: false //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true //是否显示分页（*）
sortable: false //是否启用排序
sortOrder: "desc" //排序方式
sidePagination: "server" //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1 //初始化加载第一页，默认第一页
pageSize: 10 //每页的记录行数（*）
pageList: [10 50 100] //可供选择的每页的行数（*）
strictSearch: true
showColumns: false //是否显示所有的列
showRefresh: false //是否显示刷新按钮
minimumCountColumns: 2 //最少允许的列数
clickToSelect: true //是否启用点击选中行
showToggle: false //是否显示详细视图和列表视图的切换按钮
cardView: false //是否显示详细视图
detailView: false //是否显示父子表
queryParams: function(params){
return {
pageSize: params.limit //页面大小
pageNumber: (params.offset / params.limit) 1 //页码
keyword: $("#search_json").val() // 关键词
};
}
queryParamsType: "limit" //参数格式 发送标准的RESTFul类型的参数请求
columns: myColumns
onClickRow: function (row obj) {
...
}
onLoadSuccess: function (data) {
...
}
});
function queryParams2(params) { // 配置参数 有查询条件用
var keyword = $("#search_json").val();
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
pageSize: params.limit //页面大小
pageNumber: (params.offset / params.limit) 1 //页码
keyword: keyword // 查询关键词
};
return temp;
}
注意：具体实现代码太过庞大，所以以上代码并不完整只是提供思路。
