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

disho6za 于 2023-11-15 发布在 Java

关注(0)|答案(1)|浏览(158)

我正在使用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>

字符串
表被 Package 在一个模态中，所以我使用下面的代码在模态切换时重置视图：

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似乎是正确的，完好无损。然而，我没有看到表中的数据。相反，我看到“没有找到匹配的记录”。
我在想，我需要以某种方式指定我只希望在poi对象中将我的行基于items，但我不确定如何实现这一点。

JavaScript

来源：https://stackoverflow.com/questions/77055282/using-bootstrap-table-i-am-unable-to-display-the-data-being-retrieved-with-data

1条答案

按热度按时间

bqucvtff1#

我知道这是一个较旧的帖子，但是为了将来有人会遇到它，或者可能OP仍然需要答案，这里有一个供参考。它实际上包含了引导表如何与嵌套JSON一起工作的一些有趣方面。
问题是从加载的JSON中输出任何title。
<th data-field="title" data-title="Title">Title</th>个
然而，有两个主要问题。

title出现在样本中的meeting_plan和poi中。
1.在这两种情况下，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');
    })
  })

型
Here是一个使用bootstrap-table在线编辑器的工作示例。旁注：
只是为了尝试一下，我意识到可以做一些像data-field=meeting_plan.count这样的事情，在表中显示2。然而，至少在我的测试中，这看起来像是嵌套。

赞(0）回复(0）举报 2023-11-15

我来回答

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

1条答案

相关问题

热门标签

最新问答