在沒有Bootstrap-Table的情況下將JSON加載到表中

Question

所以我目前有一個表，我知道如何通過如何將JSON數據加載到Bootstrap表中進行填充？

我的問題是更多基於好奇心。 是否可以在不使用bootstrap-table庫的情況下將JSON數據加載到Bootstrap驅動的表中？

Answer 1

答案是肯定的。 您可以使用JS編輯所有HTML，因此只要編寫正確的腳本，您就可以反序列化JSON並填充表格

Answer 2

您需要的只是一個模板，該模板可以與json數據一起使用以生成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);

Answer 3

這很簡單； 我鞭打的可擴展jQuery插件，可以輕松修改。

您只需要將帶有columns的對象傳遞給is並records數據。

我將示例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>