从 json 加载 bootstrap-table 中的数据

Question

最近我熟悉了 bootstrap-table，我正在尝试从 JSON 文件加载数据。根据文档，我尝试使用：

data-url="json/data.json"

还有：

id="person"

对于加载数据，我使用以下代码：

<th data-field="FName" data-sortable="true">First Name</th>

但它没有显示任何内容。你能给我一些关于这个问题的提示吗？

Answer 1

我设法使用您在 jsonbin.io

上托管的 json 代码制作了一个演示

这是你的json...https://api.jsonbin.io/b/5f9dfe423269193b17bffab2

在你发给我的json中，只有1行。所以我添加了 2 个额外的示例行来显示 table.

中的数据加载

你错过的东西...

首先是的，您缺少 [ ] 包装行数据。在编写 table json 代码时，请将 json 布局 table 想象成这样...

[
   // this is your table body
   {
      // this a table row
      // set tr key
      "Nayment" : {
         
         // then define each td with a sub key / value
         "Id": 24,
         "Name": "Jack Allen",
         "TotalCost": 1000,

         // etc...
      }
   },
   {
      // next table row
      // tr key
      "Nayment" : {

          // etc...
      }
   },

   // etc...
]

然后将此数据分配给相关的 table 列，在 table 标题单元格中，将 data-field 属性与 json 行键和子键 Nayment.Name.

如果您想要名字和姓氏，我想您必须在 json.

中将这些数据分开

<th data-field="Nayment.Name" data-sortable="true">Name</th>

您还可以通过扩展子键来使用更深层次的数据，例如您的余额详细信息Nayment.BalanceDetails.PowerCash

<th data-field="Nayment.BalanceDetails.PowerCash" data-sortable="true">Balance: Power Cash</th>

使用您的 json...

查看下面的现场演示

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.css">

<div class="container">
  <table id="table" data-toggle="table" data-flat="true" data-search="true" data-url="https://api.jsonbin.io/b/5f9dfe423269193b17bffab2">
    <thead>
      <tr>
        <th data-field="Nayment.Id" data-sortable="true">ID</th>
        <th data-field="Nayment.Name" data-sortable="true">Name</th>
        <th data-field="Nayment.RemainCash" data-sortable="true">Remaining Cash</th>
        <th data-field="Nayment.TotalAsset" data-sortable="true">Total Assets</th>
        <th data-field="Nayment.BalanceDetails.PowerCash" data-sortable="true"><small>Balance Details</small><br/>Power Cash</th>
        <th data-field="Nayment.BalanceDetails.BlockedCash" data-sortable="true"><small>Balance Details</small><br/>Blocked Cash</th>
        <th data-field="Nayment.BalanceDetails.creditCash" data-sortable="true"><small>Balance Details</small><br/>Credit Cash</th>
        <th data-field="Nayment.BalanceDetails.AccountCash" data-sortable="true"><small>Balance Details</small><br/>Account Cash</th>
      </tr>
    </thead>
  </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.js"></script>

从 json 加载 bootstrap-table 中的数据

load data in bootstrap-table from json

json

bootstrap-4

bootstrap-table