在没有引导表的情况下将 JSON 加载到表中答案

【问题标题】：Loading JSON into Table without Bootstrap-Table在没有引导表的情况下将 JSON 加载到表中
【发布时间】：2017-01-04 14:12:53
【问题描述】：

所以我目前有一张我知道如何通过How to load JSON data into Bootstrap table? 填充的表格

我的问题更多是基于好奇心。是否可以在不使用 bootstrap-table 库的情况下将 JSON 数据加载到 Bootstrap 驱动的表中？

【问题讨论】：

你的意思是，用 JSON 数据生成一个常规的 HTML 表，然后将其转换为 Bootstrap 表？你可以创建一个jQuery插件。

标签： javascript html twitter-bootstrap

【解决方案1】：

答案是肯定的。您可以使用 JS 编辑所有 HTML，因此只要编写正确的脚本，您就可以反序列化 JSON 并填充表格

【讨论】：

【解决方案2】：

你需要的只是一个模板，它可以与json数据一起生成像bootstrap table这样的html dom结构。

以 ExtJS XTemplate 为例：

// this is a template
var tableTemplate = new Ext.XTemplate(
  '<table class="table {tableClass}">',
    '<thead>',
      '<tr>',
        '<tpl for="columns">',
          '<th>{name}</th>',
        '</tpl>'
      '</tr>',
    '</thead>',
    '<tbody>',
      '<tpl for="row in rows">',
        '<tr>',
          '<tpl for="column in columns">',
            '<td>{row[column]}</td>',
          '</tpl>'
        '</tr>',
      '</tpl>',
    '</tbody>',
  '</table>'
);

// this is the data load from end-server
var data = {
    columns: [{
        name: 'a'
    }, {
        name: 'b'
    }, {
        name: 'c'
    }],
    rows: [{
        a: 'a1',
        b: 'b1',
        c: 'c1'
    }, {
        a: 'a2',
        b: 'b2',
        c: 'c2'
    }, {
        a: 'a3',
        b: 'b3',
        c: 'c3'
    }]
};

//generate html with template and data 
tableTemplate.overwrite(dom, data);

【讨论】：

【解决方案3】：

这很简单；我开发的可扩展的 jQuery 插件，可以轻松修改。

您只需将对象传递给带有columns 和records 数据的is。

我将示例 JSON 存储在一个不可见的 TextArea 中，并在将数据发送到插件函数之前简单地检索和解析数据。

(function($) {
  $.fn.populateTable = function(tableData) {
    $('<thead>').append($('<tr>').append(tableData.columns.map(function(column) {
      var colIsObj = column !== null && typeof column === 'object';
      var dataIndex = colIsObj ? column.fieldName : column;
      var displayText = colIsObj && column.text != '' ? column.text : dataIndex;
      return $('<th>').text(displayText);
    }))).appendTo(this);
    $('<tbody>').append(tableData.records.map(function(record) {
      return $('<tr>').append(tableData.columns.map(function(column) {
        var colIsObj = column !== null && typeof column === 'object';
        var dataIndex = colIsObj ? column.dataIndex : column;
        var value = colIsObj && column['convert'] != null ? column.convert(record) : record[dataIndex];
        return $('<td>').text(value).css(colIsObj ? (column.css || {}) : {});
      }));
    })).appendTo(this);
    return this;
  };
})(jQuery);

var tableData = {
  "columns" : [ 
    "id",
    {
      //"dataIndex" : "name", <-- Optional if text is defined.
      "text" : "Full Name",
      "convert" : function(record) {
        return record.givenName + " " + record.surname;
      }
    }, {
      "dataIndex" : "dob",
      "text" : "Date of Birth",
      "convert" : function(record) {
        return moment(record.dob).format('MMMM Do, YYYY');
      },
      "css" : {
        "text-align" : "center"
      }
    }
  ],
  "records" : JSON.parse(document.getElementById('json-data').innerHTML)
};

$('#data-table').populateTable(tableData);

#json-data { display: none; }
#data-table, #data-table th, #data-table td { border-collapse: collapse; border: thin solid black; }
#data-table th, #data-table td { padding: 0.25em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>

<textarea id="json-data">[ {
  "id" : 1,
  "givenName" : "John",
  "surname" : "Doe",
  "dob" : "1950-12-31"
  }, {
  "id" : 2,
  "givenName" : "Jane",
  "surname" : "Doe",
  "dob" : "1968-07-04"
} ]</textarea>
<table id="data-table"></table>

【讨论】：