javascript 如何在 Bootstrap 表中插入和更新数据?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/31288666/
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 insert and update data in Bootstrap table?
提问by Ritesh Mathur
I haven't found the exact answer that how to insert and update data in bootstrap table.
我还没有找到如何在引导表中插入和更新数据的确切答案。
The data is coming from a URL in JSON format.
数据来自 JSON 格式的 URL。
I have to use multiple URLs in a same table.
我必须在同一个表中使用多个 URL。
采纳答案by HimalayanCoder
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.css">
<!-- Latest compiled and minified JavaScript -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.js"></script>
</head>
<body>
<div style="margin : 100px;">
<button class="btn-primary btn" onclick="load();" >Load Table</button>
<button class="btn-primary btn" onclick="reload();">Update Table</button>
</div>
<table class="table" id="table">
<thead>
<tr>
<th data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
<script>
$('#table').bootstrapTable({});
function load(){
var data = [{
id: 1,
name: 'Item 1',
price: ''
}, {
id: 2,
name: 'Item 2',
price: ''
}];
$('#table').bootstrapTable("load", data);
}
function reload(){
var data = [{
id: 3,
name: 'Item 3',
price: ''
}, {
id: 4,
name: 'Item 4',
price: ''
}];
$('#table').bootstrapTable("load", data);
}
</script>
</body>
</html>
If the data is coming from an API as JSON, you need to first download the JSON from the API endpoint and store it in a javascript variable and load
如果数据以 JSON 形式来自 API,则需要首先从 API 端点下载 JSON 并将其存储在 javascript 变量中并加载
回答by javatogo
Say the json data is held in a javascript array called myList at index 0 & you are inserting into myTable, use the 'insertRow' option for bootstrap table to insert as the last row at the end of the table, as below:
假设 json 数据保存在索引 0 处名为 myList 的 javascript 数组中,并且您要插入 myTable,请使用引导表的 'insertRow' 选项作为表末尾的最后一行插入,如下所示:
var rowId = $("#myTable >tbody >tr").length;
$(myTable).bootstrapTable('insertRow',{
index: rowId,
row: myList[0]
});