从 json 加载引导表中的数据

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 个额外的示例行来显示表中的数据加载。

你错过的东西......

首先是的，您缺少 [ ] 包装行数据。在对表 json 进行编码时，请考虑像这样的 json 布局表......

[
   // 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...
]

然后将此数据分配给相关的表列，在表头单元格中，使用带有json行键和子键Nayment.Name的data-field属性。

如果你想要名字和姓氏，我想你必须在你的 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>