twitter-bootstrap 如何在引导表中显示 JSON 数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42814561/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display JSON data in bootstrap table
提问by user244394
I am trying to use bootstrap table to load json data. how can i load an external json file into the bootstrap table below.
我正在尝试使用引导表来加载 json 数据。我如何将外部 json 文件加载到下面的引导表中。
HTML
HTML
<table data-toggle="table"
data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/"
data-click-to-select="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
</table>
JSON
JSON
{
"Name": "Jeame whos",
"LoanApproved": "12/5/2015",
"LastActivity": "4/1/2016",
"Aging": "3",
"Brokerage": "My Broker",
"Contact": "J. Johnson",
"ContactPhone": "(212) 902-3614",
"RiskCategory": "Yellow",
"rows": [{
"Account": "086-1234",
"ClientName": "Sally Sung",
"AccountType": "",
"MarketValue": "450000"
}, {
"Account": "086-1235",
"ClientName": "Sally Sung",
"AccountType": "rust",
"MarketValue": "550000"
},
{
"Account": "086-1236",
"ClientName": "Sally Sung",
"AccountType": "Retail",
"MarketValue": "550000"
}]
}
回答by Neil
I noticed that your JSON is not valid. Refer to line "Name": "Jeames "C0010",there is an extra quote. It should be "Name": "Jeames C0010",.
我注意到您的 JSON 无效。请参阅行"Name": "Jeames "C0010",有一个额外的报价。应该是"Name": "Jeames C0010",。
However, I also wrote up an example as well:
不过，我也写了一个例子：
$.getJSON("http://neil.computer/stack/response.json", function (jsonFromFile) {
$('#table').bootstrapTable({
data: jsonFromFile.rows
})
});<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
<div class="container">
<table id="table">
<thead>
<tr>
<th data-field="Account">Item ID</th>
<th data-field="ClientName">Item Name</th>
<th data-field="AccountType">Item Price</th>
<th data-field="MarketValue">Item Price</th>
</tr>
</thead>
</table>
</div>