如何使用Boostrap表使用外部json文件获取列总和 [英] Howto use Boostrap table to get column sum using external json file
问题描述
我有以下基于bootstrap的表，我正在尝试计算总MarketValue。它读取外部json文件。但由于某种原因，它没有添加值。
I have the following bootstrap based table and I am trying to calculate the total MarketValue. Its reading an external json file. but for some reason its not adding the values.
当我加载外部json时问题开始了。文件。我该如何解决这个问题？
the problem starts when i load an external json. file. How can i fix this?
$.getJSON("json/prep.json", function (jsonFromFile) {
$('#table1').bootstrapTable({
data: jsonFromFile.rows
})
var total1 = data.reduce(function(a, b){
return a + parseFloat(b.LongMarketValue);
}, 0);
document.querySelector('.total1').innerHTML = total1;
});
JSON - prep.json
JSON - prep.json
{
"Name": "Julie Brown",
"Account": "C0010",
"LoanApproved": "12/5/2015",
"LastActivity": "4/1/2016",
"PledgedPortfolio": "1000",
"MaxApprovedLoanAmt": "10000",
"LoanBalance": "1849000",
"AvailableCredit": "2877.824375",
"Aging": "3",
"Brokerage": "My Broker",
"Contact": "oJohnson",
"ContactPhone": "-3614",
"RiskCategory": "Yellow",
"rows": [{
"Account": "086-1234",
"ClientName": "S Smth",
"AccountType": "tail",
"LongMarketValue": "$40000"
}, {
"Account": "086-1235",
"ClientName": "all Sth",
"AccountType": "REV Trust",
"LongMarketValue": "$55000"
},
{
"Account": "086-1236",
"ClientName": "Sly Smith",
"AccountType": "Reail",
"LongMarketValue": "$5500"
}]
}
HTML
<table id="table1">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="Account">Account #</th>
<th data-field="ClientName">Client</th>
<th data-field="AccountType">Account Type</th>
<th data-field="MarketValue"> Market Value</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<th></th>
<th> Total <span class="total1"></span></th>
</tr>
</tfoot>
</table>
推荐答案
数据在代码中未定义，您必须从表或Json中检索数据。此外，您的数据返回一个带有 $ 符号的字符串，因此您必须在解析之前将其删除。
data is undefined in your code, you have to retrieve data from table or from Json. Also your data returns a string with $ sign, so you have to remove it before parsing it.
这是一个工作示例。
// Code goes here
$(function () {
$.getJSON("https://api.myjson.com/bins/89vsf", function (jsonFromFile) {
$('#table1').bootstrapTable({
data: jsonFromFile.rows
})
var data = $('#table1').bootstrapTable('getData');
var total1 = data.reduce(function(a, b){
return a + parseFloat(b.LongMarketValue.replace('$',''));
}, 0);
document.querySelector('.total1').innerHTML = total1;
});
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table id="table1">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="Account">Account #</th>
<th data-field="ClientName">Client</th>
<th data-field="AccountType">Account Type</th>
<th data-field="LongMarketValue"> Market Value</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<th></th>
<th> Total <span class="total1"></span></th>
</tr>
</tfoot>
</table>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<script src="script.js"></script>
</body>
</html>
这是一个工作的代码。 http://plnkr.co/edit/PSCR5iS7DSWkuQb1jv5P?p=preview
希望这有帮助。
Here is a working plunker of the code. http://plnkr.co/edit/PSCR5iS7DSWkuQb1jv5P?p=preview Hope this helps.
这篇关于如何使用Boostrap表使用外部json文件获取列总和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
