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 部分代码来自该在线调试工具，在此感谢作者无私分享。