为什么我无法在引导表中填充 json 数据答案

【问题标题】：Why I am not able to populate the json data in bootstrap table为什么我无法在引导表中填充 json 数据
【发布时间】：2016-01-09 05:36:06
【问题描述】：

我正在使用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">&times;</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'
            }]

        });

    });
});

这是我得到的结果 单击按钮后弹出模式弹出窗口。但没有数据，

但如果我能以第一种方式做到这一点会更好。

我不知道自己的不足之处。当我不使用模态时。表工作正常，但因为我包括模态。它不起作用。请帮忙

【问题讨论】：

我发现的很多示例实际上是导入 JSON 文件而不是引用数组。我认为这里的问题可能是您的数据实际上不是 JSON。 wenzhixin.net.cn/p/bootstrap-table/docs/…

标签： javascript json twitter-bootstrap

【解决方案1】：

DEMO

问题在于三件事：

我在您的邮件中没有看到 link 到 bootstraptable.css 和 bootstraptable.js html。

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>

【讨论】：

我想知道的一件事...... bootstrap.js 和 bootstrap.css 是主文件。如果我们包括这个，我们真的需要包括其他人，正如你提到的。那么它们有什么区别呢。
是的@varun .. 您使用的表格是一个与bootstrap 协调的插件。 Bootstrap 是一个用于响应式设计的框架，bootstraptable 是一个基于它构建的插件.. :)