Question

我开始创建一个带有bootstrap框架的网站。现在我想在此URL中使用bootstrap-table包含一个表：http://bootstrap-table.wenzhixin.net.cn/

问题是示例不起作用我认为问题是将数据填入表中。代码是这样的：

<!DOCTYPE html>
<html>
<head>
    <title>Check/Uncheck All in all page</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/bootstrap-table/src/bootstrap-table.css">
    <link rel="stylesheet" href="assets/examples.css">
    <script src="assets/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/bootstrap-table/src/bootstrap-table.js"></script>
    <script src="ga.js"></script>
</head>
<body>
    <div class="container">
        <h1>Check/Uncheck All in all page(<a href="https://github.com/wenzhixin/bootstrap-table/issues/1167" target="_blank">#1167</a>).</h1>
        <div class="toolbar">
            <button id="checkAll" class="btn btn-default">Check All</button>
            <button id="uncheckAll" class="btn btn-default">Uncheck All</button>
        </div>
        <table id="table"
               data-toggle="table"
               data-toolbar=".toolbar"
               data-pagination="true"
               data-maintain-selected="true"
               data-url="data1.json">
            <thead>
            <tr>
                <th data-field="state" data-checkbox="true"></th>
                <th data-field="id">ID</th>
                <th data-field="name">Item Name</th>
                <th data-field="price">Item Price</th>
            </tr>
            </thead>
        </table>
    </div>
<script>
    var $table = $('#table');
    $(function () {
        $('#checkAll').click(function () {
            $table.bootstrapTable('togglePagination').bootstrapTable('checkAll').bootstrapTable('togglePagination');
        });
        $('#uncheckAll').click(function () {
            $table.bootstrapTable('togglePagination').bootstrapTable('uncheckAll').bootstrapTable('togglePagination');
        });
    });
</script>
</body>
</html>

我已经正确地引用了bootstrap，bootstrap-table和jquery，但我认为问题是数据，有一个参数：<data-url="data1.json">但我没有这个文件。目前的结果：

正确的结果：

抱歉，我很失落......

谢谢！

Answer 1

在你的代码片段中，你有这一行：

data-url="data1.json">

所以，数据在这个json文件中。您可以从以下网址下载：HERE。

加载json数据的另一种方法是：

$table.bootstrapTable('load', data1Json);

摘录：

＆＃13;

var data1Json = [
  {
    "id": 0,
    "name": "Item 0",
    "price": "$0"
  },
  {
    "id": 1,
    "name": "Item 1",
    "price": "$1"
  },
  {
    "id": 2,
    "name": "Item 2",
    "price": "$2"
  },
  {
    "id": 3,
    "name": "Item 3",
    "price": "$3"
  },
  {
    "id": 4,
    "name": "Item 4",
    "price": "$4"
  },
  {
    "id": 5,
    "name": "Item 5",
    "price": "$5"
  },
  {
    "id": 6,
    "name": "Item 6",
    "price": "$6"
  },
  {
    "id": 7,
    "name": "Item 7",
    "price": "$7"
  },
  {
    "id": 8,
    "name": "Item 8",
    "price": "$8"
  },
  {
    "id": 9,
    "name": "Item 9",
    "price": "$9"
  },
  {
    "id": 10,
    "name": "Item 10",
    "price": "$10"
  },
  {
    "id": 11,
    "name": "Item 11",
    "price": "$11"
  },
  {
    "id": 12,
    "name": "Item 12",
    "price": "$12"
  },
  {
    "id": 13,
    "name": "Item 13",
    "price": "$13"
  },
  {
    "id": 14,
    "name": "Item 14",
    "price": "$14"
  },
  {
    "id": 15,
    "name": "Item 15",
    "price": "$15"
  },
  {
    "id": 16,
    "name": "Item 16",
    "price": "$16"
  },
  {
    "id": 17,
    "name": "Item 17",
    "price": "$17"
  },
  {
    "id": 18,
    "name": "Item 18",
    "price": "$18"
  },
  {
    "id": 19,
    "name": "Item 19",
    "price": "$19"
  },
  {
    "id": 20,
    "name": "Item 20",
    "price": "$20"
  }
];
$(function () {
  var $table = $('#table');
  $table.bootstrapTable('load', data1Json);
  $('#checkAll').click(function () {
    $table.bootstrapTable('togglePagination').bootstrapTable('checkAll').bootstrapTable('togglePagination');
  });
  $('#uncheckAll').click(function () {
    $table.bootstrapTable('togglePagination').bootstrapTable('uncheckAll').bootstrapTable('togglePagination');
  });
});

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.js"></script>


<div class="container">
    <h1>Check/Uncheck All in all page(<a href="https://github.com/wenzhixin/bootstrap-table/issues/1167" target="_blank">#1167</a>).</h1>
    <div class="toolbar">
        <button id="checkAll" class="btn btn-default">Check All</button>
        <button id="uncheckAll" class="btn btn-default">Uncheck All</button>
    </div>
    <table id="table"
           data-toggle="table"
           data-toolbar=".toolbar"
           data-pagination="true"
           data-maintain-selected="true"
           data-url="">
        <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="id">ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
        </thead>
    </table>
</div>

＆＃13;

带示例代码的Bootstrap-table错误

1 个答案: