為什么我無法在引導表中填充 json 數據
[英]Why I am not able to populate the json data in bootstrap table
問題描述
我正在使用Booststrap表來填充json數據。
<!DOCTYPE html> <html lang="en"> <title> Boostrap Modal Example </title> <head> <meta charset="utf-8"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="bootstrap.js"></script> <link rel="stylesheet" type="text/css" href="bootstrap.css"> <script type="text/javascript"> var data = [ { "id": 0, "name": "test0", "price": "$0" }, { "id": 1, "name": "test1", "price": "$1" }, { "id": 2, "name": "test2", "price": "$2" }, { "id": 3, "name": "test3", "price": "$3" }, { "id": 4, "name": "test4", "price": "$4" }, { "id": 5, "name": "test5", "price": "$5" } ]; $(document).ready(function() { alert("I am ready"); $('#modalTable').on('shown',function() { console.log("I am in bro"); $('#mytable').bootstrapTable({ data: data }); }); }); </script> </head> <body> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modalTable">Show Table</button> <!-- Modal --> <div id="modalTable" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <table id="mytable" data-toggle="table" class="table"> <thead> <tr> <th class="col-xs-1" data-field="id">Id</th> <th class="col-xs-1" data-field="name"> Name</th> <th class="col-xs-2" data-field="price">Price</th> </tr> </thead> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </body> </html>
我也試過這個，但它確實有效。
$(document).ready(function () { alert("I am ready"); $('#modalTable').on('shown', function () { console.log("I am in bro"); $('#mytable').bootstrapTable({ columns: [{ field: 'id', title: 'Id' }, { field: 'name', title: 'Name' }, { field: 'price', title: 'Price' } ], data: [{ id: 1, name: 'Item 1', price: '$1' }, { id: 2, name: 'Item 2', price: '$2' }, { id: 2, name: 'Item 2', price: '$2' }, { id: 2, name: 'Item 2', price: '$2' }, { id: 2, name: 'Item 2', price: '$2' }] }); }); });
但如果我能以第一種方式做到這一點會更好。
我不知道我的不足之處。 當我不使用模態時。 表工作正常，但因為我包括模態。 它不起作用。 請幫忙
1 個解決方案
解決方案1
1 已采納 2015-10-12 05:28:21
問題在於三件事：
- 我在你的
html沒有看到bootstraptable.css和bootstraptable.js的link。- 打開時的
Bootstrap Modal event應該是shown.bs.modal而不是只shown。 所以它會是$('#modalTable').on('shown.bs.modal',function()而不是$('#modalTable').on('shown',function()- 從您的
table刪除data-toggle。 那里不需要。
所以下面是更新的JS和HTML
JS
$('#modalTable').on('shown.bs.modal',function()
{
console.log("I am in bro");
$('#mytable').bootstrapTable({
data: data
});
});
HTML
<table id="mytable" class="table">
<thead>
<tr>
<th class="col-xs-1" data-field="id">Id</th>
<th class="col-xs-1" data-field="name"> Name</th>
<th class="col-xs-2" data-field="price">Price</th>
</tr>
</thead>
</table>
使用來自 json 源的數據填充 Bootstrap 表
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.