? 最近在開發一個物業管理軟件，其中用到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? 也請大家參考！
