bootstrap 表格插件bootstrap table 的使用经验谈！
最近在开发一个物业管理软件，其中用到bootstrap 的模态框。同时需要获取表格数据。用传统的方法，本人不想用，考虑到bootstrap应该有获取表格数据的方法，结果发现要想实现获取表格数据功能，需要通过bootstrap的插件实现：bootstrap table，地址：https://bootstrap-table.com/
登录网站并大体浏览一下数据，抱着急不可耐的心情，抓紧测试一下，该物业软件我用的是asp.net mvc 开发的，当然也是在该环境下测试啦。代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://www.itxst.com/package/bootstrap-table-1.14.1/jquery-3.3.1/jquery.js"></script>
<link href="https://www.itxst.com/package/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
<link href="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.css" rel="stylesheet" />
<script src="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.js"></script>
<title>bootstrap table getData在线例子</title>
<style>
.table-demo {
width: 80%;
margin: 30px auto 0px auto;
}
.titles {
float: right;
clear: both;
}
</style>
</head>
<body>
<div id="toolbar">
<button onclick="getData()">获取数据</button>
</div>
<div class="table-demo">
<table id="table"></table>
</div>
<script>
//设置需要显示的列
var columns = [
{
field: "Id",
title: 'ID'
}, {
field: 'Car',
title: '品牌'
}, {
field: 'StockNum',
title: 'Num'
}];
//需要显示的数据
var data = [{
Id: 1000,
Car: '本田',
StockNum: '1'
}, {
Id: 1002,
Car: '丰田',
StockNum: '2'
}, {
Id: 1003,
Car: '宝马',
StockNum: '3'
}, {
Id: 1004,
Car: '别克',
StockNum: '4'
}];
//bootstrap table初始化数据
$('#table').bootstrapTable({
toolbar: "#toolbar",
columns: columns,
data: data,
pageSize: 2,
pagination: true
});
function getData() {
var data = $('#table').bootstrapTable('getData', { useCurrentPage: true, includeHiddenRows: true });
alert(JSON.stringify(data));
}
</script>
</body>
</html>
运行，结果出现如下问题：
反复运行都不行，后来启用vscode编辑器。把代码贴上去，经过测试，发现ok，上述问题消失，所以，考虑是asp.net mvc环境问题。初步考虑是js干扰问题，因为我测试使用的asp.net mvc默认环境，而该默认环境已经引入了一些js，如jquery.js bootstrap.js等比较多的js脚本。所以果断干掉它，在原来环境基础上增加了如下代码，排除干扰：
@{
//清除环境干扰
Layout = null;
}那么，排除干扰后的代码如下：
@{
//清除环境干扰
Layout = null;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://www.itxst.com/package/bootstrap-table-1.14.1/jquery-3.3.1/jquery.js"></script>
<link href="https://www.itxst.com/package/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
<link href="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.css" rel="stylesheet" />
<script src="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.js"></script>
<title>bootstrap table getData在线例子</title>
<style>
.table-demo {
width: 80%;
margin: 30px auto 0px auto;
}
.titles {
float: right;
clear: both;
}
</style>
</head>
<body>
<div id="toolbar">
<button onclick="getData()">获取数据</button>
</div>
<div class="table-demo">
<table id="table"></table>
</div>
<script>
//设置需要显示的列
var columns = [
{
field: "Id",
title: 'ID'
}, {
field: 'Car',
title: '品牌'
}, {
field: 'StockNum',
title: 'Num'
}];
//需要显示的数据
var data = [{
Id: 1000,
Car: '本田',
StockNum: '1'
}, {
Id: 1002,
Car: '丰田',
StockNum: '2'
}, {
Id: 1003,
Car: '宝马',
StockNum: '3'
}, {
Id: 1004,
Car: '别克',
StockNum: '4'
}];
//bootstrap table初始化数据
$('#table').bootstrapTable({
toolbar: "#toolbar",
columns: columns,
data: data,
pageSize: 2,
pagination: true
});
function getData() {
var data = $('#table').bootstrapTable('getData', { useCurrentPage: true, includeHiddenRows: true });
alert(JSON.stringify(data));
}
</script>
</body>
</html>
重新运行，一切ok！
在此，感谢IT小书童 bootstrap table getData获取表格数据的方法 - itxst.com 部分代码来自该在线调试工具，在此感谢作者无私分享。
上述网站是比较好的一个在线测试工具网站。非常好用
bootstrap table getData获取表格数据的方法 - itxst.com 也请大家参考！