Question

我正在使用Booststrap表来填充json数据。

＆＃13;

<!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>

＆＃13;

我也尝试了这个，但它有效。

＆＃13;

$(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'
            }]

        });

    });
});

＆＃13;

＆＃13; 这是我得出的 点击按钮后弹出模态弹出窗口。但没有数据，

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

我不知道我缺少的地方。当我不使用莫代尔。表工作正常，但因为我包括模态。它不起作用。请帮忙

Answer 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()

从data-toggle移除table。那里不需要。

以下是更新的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表中填充json数据

1 个答案: