如何添加 json 数据而不是 data-url 来填充网格？答案

【问题标题】：How to add json data instead of data-url to populate the grid?如何添加 json 数据而不是 data-url 来填充网格？
【发布时间】：2017-08-30 18:23:59
【问题描述】：

如何在下面的代码中添加静态 JSON 数据而不是动态 data-url 来填充网格？基本上我有静态数据而不是动态数据。

<html> 
  <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.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.1/bootstrap-table.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/extensions/export/bootstrap-table-export.min.js"></script>
  </head>
  <body>
    <table data-toggle="table"
      data-search="true"
      data-show-refresh="true"
      data-show-toggle="true"
      data-show-columns="true"
      data-show-export="true"
      data-minimum-count-columns="2"
      data-show-pagination-switch="true"
      data-pagination="true"
      data-id-field="id"
      data-page-list="[10, 25, 50, 100, ALL]"
      data-show-footer="false"
      data-side-pagination="client"
      data-url="https://jsonplaceholder.typicode.com/photos">
      <thead>
        <tr>
          <th data-field="id">Id</th>
          <th data-field="title">Title</th>
          <th data-field="url">URL</th>
          <th data-field="thumbnailUrl">Thumbnail URL</th>
        </tr>
      </thead>
  </body>     
</html>

谢谢

【问题讨论】：

标签： javascript json bootstrap-table

【解决方案1】：

我会将 JSON 数据作为常量变量放在 JavaScript 文件中，然后在加载表时引用它。

要以这种方式运行库，您需要：

删除数据表属性。
为您的 HTML 表格添加一个 ID。
添加对数据、表和库的调用。

由于 sn-p 工具的限制，我无法包含完整的 5,000 个结果。但我已经对其进行了测试，它的加载速度和以前一样快。

const myData =
[
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "http://placehold.it/600/92c952",
    "thumbnailUrl": "http://placehold.it/150/92c952"
  },
  {
    "albumId": 1,
    "id": 2,
    "title": "reprehenderit est deserunt velit ipsam",
    "url": "http://placehold.it/600/771796",
    "thumbnailUrl": "http://placehold.it/150/771796"
  },
  {
    "albumId": 1,
    "id": 3,
    "title": "officia porro iure quia iusto qui ipsa ut modi",
    "url": "http://placehold.it/600/24f355",
    "thumbnailUrl": "http://placehold.it/150/24f355"
  },
  {
    "albumId": 1,
    "id": 4,
    "title": "culpa odio esse rerum omnis laboriosam voluptate repudiandae",
    "url": "http://placehold.it/600/d32776",
    "thumbnailUrl": "http://placehold.it/150/d32776"
  },
  {
    "albumId": 1,
    "id": 5,
    "title": "natus nisi omnis corporis facere molestiae rerum in",
    "url": "http://placehold.it/600/f66b97",
    "thumbnailUrl": "http://placehold.it/150/f66b97"
  },
  {
    "albumId": 1,
    "id": 6,
    "title": "accusamus ea aliquid et amet sequi nemo",
    "url": "http://placehold.it/600/56a8c2",
    "thumbnailUrl": "http://placehold.it/150/56a8c2"
  },
  {
    "albumId": 1,
    "id": 7,
    "title": "officia delectus consequatur vero aut veniam explicabo molestias",
    "url": "http://placehold.it/600/b0f7cc",
    "thumbnailUrl": "http://placehold.it/150/b0f7cc"
  },
  {
    "albumId": 1,
    "id": 8,
    "title": "aut porro officiis laborum odit ea laudantium corporis",
    "url": "http://placehold.it/600/54176f",
    "thumbnailUrl": "http://placehold.it/150/54176f"
  },
  {
    "albumId": 1,
    "id": 9,
    "title": "qui eius qui autem sed",
    "url": "http://placehold.it/600/51aa97",
    "thumbnailUrl": "http://placehold.it/150/51aa97"
  },
  {
    "albumId": 1,
    "id": 10,
    "title": "beatae et provident et ut vel",
    "url": "http://placehold.it/600/810b14",
    "thumbnailUrl": "http://placehold.it/150/810b14"
  }
];

<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.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.1/bootstrap-table.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/extensions/export/bootstrap-table-export.min.js"></script>
  
  <!-- I would include the data as a constant in a JavaScript file. -->
  <script src="above.js"></script>
  <script>
    $(function () {
      $("#myTable").bootstrapTable({ data: myData });
    });
  </script>
</head>

<body>
  <table id="myTable"
       data-search="true"
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-show-export="true"
       data-minimum-count-columns="2"
       data-show-pagination-switch="true"
       data-pagination="true"
       data-id-field="id"
       data-page-list="[10, 25, 50, 100, ALL]"
       data-show-footer="false"
       data-side-pagination="client">
    <thead>
      <tr>
        <th data-field="id">Id</th>
        <th data-field="title">Title</th>
        <th data-field="url">URL</th>
        <th data-field="thumbnailUrl">Thumbnail URL</th>
      </tr>
    </thead>
</body>

</html>

【讨论】：

【解决方案2】：

如果我对您的理解正确，您想使用 json 而不进行 ajax 调用（静态数据）。你看过examples吗？

删除您的data-toggle="table" 属性并尝试以下脚本：

  <script>
    var json = '[{ "albumId": 1, "id": 1, "title": "accusamus beatae ad facilis cum similique qui sunt", "url": "http://placehold.it/600/92c952", "thumbnailUrl": "http://placehold.it/150/92c952" }]'
    var data = JSON.parse(json);
    var $table = $('#table');   
    $table.bootstrapTable({data: data});        
  </script>

load 和 append 数据也可以 - 只需查看 documentation。

【讨论】：

你能修复上面的例子吗，如何修复它？