【问题标题】:How to insert the following JSON Data into a table?如何将以下 JSON 数据插入表中?
【发布时间】:2015-04-30 21:33:06
【问题描述】:

我对修复以下代码感到非常沮丧。我是 Javascript 新手,在这里我需要一点帮助:

我有以下代码,我试图在 Bootstrap-Table 中插入所有这些但没有成功。我总是收到下一个错误:

没有找到匹配的记录。

<script>
    function showResult(sectoresURL) {

      $('#info').empty(); // First, remove all child in stack.

      $.getJSON(sectoresURL, function (json) {
        if (sectores.getVisible() && typeof(json.features[0])  != 'undefined') {
          $('#info').append('<table id=table-javascript></table>');
          buildSectorTable(sectoresURL);
        }
      });
    }

    function buildSectorTable(sectoresURL) {

      $('#table-javascript').bootstrapTable({
              method: 'get',
              url: sectoresURL,
              cache: true,
              height: 400,
              striped: true,
              pagination: true,
              pageSize: 50,
              pageList: [10, 25, 50, 100, 200],
              search: true,
              showRefresh: true,
              minimumCountColumns: 2,
              clickToSelect: false,
              showToggle: true,
              columns: [{
                  field: 'type',
                  title: 'Numero',
                  align: 'center',
                  valign: 'bottom',
                  sortable: true
              }]
      });
    }

    </script>

在这里,我只是尝试插入“Numero”。

顺便说一下,JSON 数据是:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "id": "SectoresComunaCurico.34",
      "geometry_name": "FiguraGeometrica",
      "properties": {
        "Numero": 19,
        "Sector": "Cordillera"
      }
    }
  ],
  "crs": {
    "type": "name",
    "properties": {
      "name": "urn:ogc:def:crs:EPSG::32319"
    }
  }
}

【问题讨论】:

  • 示例数据是整个数据集,还是列表中的单个项目?
  • 请展示您尝试过的内容,以便我们尝试更新,而不是期望这里有人为您从头开始编写。还显示预期输出
  • 您的问题可能是列表不在数据的顶层。我的意思是 [{"key":"value",...},{"key":"value2",...}] 而不是 {"key":[{"key":"value",...},{"key":"value2",...}]}

标签: javascript jquery html json twitter-bootstrap


【解决方案1】:

首先,在 HTML 中使用 ID 定义您的表格,以便您可以访问它。如果您使用的是 Bootstrap,请为其提供必要的类。 (class="table")

<table id="table-id">
    <thead>
        <tr>
            <th>Some Header</th>
            <th>Another Header</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

现在,对于 Javascript,您需要添加到表格中。

$('#table-id > tbody').append('<tr><td>Some Content</td><td>Some Other Content</td></tr>');

如果您想添加多于一行,请遍历列表并为列表中的该项每次运行代码。

如果需要清表(新数据等),可以使用

$('#table-id > tbody').children().remove();

如果您需要,请要求澄清。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-01-09
    • 2017-08-13
    • 2019-10-25
    • 1970-01-01
    • 2021-02-19
    相关资源
    最近更新 更多