Question

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

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

Answer 1

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

Answer 2

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

使用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);

Answer 3

这很简单;我可以轻松修改的可扩展jQuery插件。

您只需将对象传递给包含records和(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存储在一个不可见的TextArea中，并在将数据发送到插件函数之前简单地检索和解析数据。

＆＃13;

#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; }

＆＃13;

<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>

＆＃13;

KUTTypeVideo

＆＃13;

在没有Bootstrap-Table

3 个答案: