使用 bootstrap-table 我无法显示使用 data-url 检索的数据

Question

我正在使用 bootstrap-table，希望从 URL 加载 JSON 数据并将其显示在表中。我尝试遵循库文档，虽然我可以看到数据已正确加载到浏览器中，但它没有显示在表中。

我创建了一个如下所示的表格：

<table id="meetingPoiModalTable" class="caption-top"
       data-toggle="table"
       data-url="http://example.org/data">
  <caption class="h5">Points of Interest</caption>
  <thead>
    <tr>
      <th data-field="title" data-title="Title">Title</th>
    </tr>
  </thead>
</table>

表格包装在模态中，因此我使用以下代码在切换模态时重置视图：

let $meetingPoiModalTable = $('#meetingPoiModalTable');

$(function() {
    $('#meetingPlanModal').on('shown.bs.modal', function () {
        $meetingPoiModalTable.bootstrapTable('resetView');
    })
})

JSON 的格式如下：

{
  "access_time": "2023-09-06 20:38:47.323838",
  "meeting_date": "2023-07-17",
  "meeting_plan": {
    "count": 2,
    "items": [
      {
        "m_title": "build_an_arcade",
        "section": "plans",
        "title": "Build an Arcade",
        "url": "/agendas/2023-07-17#collapse-build_an_arcade"
      },
      {
        "m_title": "don_t_waste_money",
        "section": "orders",
        "title": "Don't Waste Money",
        "url": "/agendas/2023-07-17#collapse-don_t_waste_money"
      }
    ]
  },
  "poi": {
    "count": 3,
    "items": [
      {
        "m_title": "build_an_arcade",
        "section": "plans",
        "title": "Build an Arcade",
        "url": "/agendas/2023-07-17#collapse-build_an_arcade"
      },
      {
        "m_title": "don_t_waste_money",
        "section": "orders",
        "title": "Don't Waste Money",
        "url": "/agendas/2023-07-17#collapse-don_t_waste_money"
      },
      {
        "m_title": "grow_up",
        "section": "refused_items",
        "title": "Grow Up",
        "url": "/agendas/2023-07-17#collapse-grow_up"
      }
    ]
  }
}

我打开了 Chrome 检查器并查看了加载模式时提取的数据，并且 JSON 看起来正确且完整。但是，我没有看到表中的数据。相反，我看到“未找到匹配的记录”。

我认为我需要以某种方式指定我只想将行基于

items

对象中的

poi

，但我不确定如何完成此操作。

Answer 1

我知道这是一篇较旧的帖子，但为了将来有人遇到它，或者也许OP仍然需要答案，这里有一个供参考。它实际上结合了引导表如何与嵌套 JSON 一起工作的一些有趣的方面。

问题是希望从加载的 JSON 中输出任何

title

。

<th data-field="title" data-title="Title">Title</th>

但是，有两个主要问题。

1. title

   出现在样本中的

   meeting_plan

   和

   poi

   中。
2. 在这两种情况下，

   title

   都嵌套在

   items

   内。

一般来说，我尝试始终为 bootstrap-table 提供平面 JSON 输入，通常在服务器端重写响应（如果我可以控制它），或者在客户端重写响应（如果不可能）。

因此，您可以使用如下函数将其展平，这将从两个部分中获取

title

（假设 $data 是您的 JSON）

 $data.forEach(row => {
    // Merge meeting_plan.items and poi.items
    var combinedItems = [];
    if (row.meeting_plan && row.meeting_plan.items) {
      combinedItems = combinedItems.concat(row.meeting_plan.items);
    }
    if (row.poi && row.poi.items) {
      combinedItems = combinedItems.concat(row.poi.items);
    }

    // Create a new row in the flattenedData for each item
    combinedItems.forEach(item => {
      flattenedData.push({
        title: item.title,
        // Add other properties you want to display in each row
      });
    });
  });

然后初始化表，可以使用

load

方法。

function, then resetView
  $(function () {
    $('#meetingPlanModal').on('shown.bs.modal', function () {
      $meetingPoiModalTable.bootstrapTable('load', flattenedData).bootstrapTable('resetView');
    })
  })

这里是一个使用 bootstrap-table 在线编辑器的工作示例。 旁注：

只是为了尝试一下，我意识到是可以做类似

data-field=meeting_plan.count

的事情，它将在表格中显示

2

。然而，至少在我的测试中，这似乎是它能够处理的嵌套数量。