从 JSON 文件，Bootstrap-table 自动创建标头

Question

我正在使用this 引导库，实际上一切正常。问题是，bootstrap-table 能否根据 JSON 文件自动生成标头？我试图找到有关此的任何信息，但不走运。现在我的标题是从这个例子中的脚本生成的：

function initTable() {
$table.bootstrapTable({
    height: getHeight(),
    columns: [{
        field: 'field1',
        title: 'title1',
        sortable: true

    }, {
        field: 'field2',
        title: 'title2',
        sortable: true
    }, {
        field: 'field3',
        title: 'title3',
        sortable: true
    }, {
        field: 'Actions',
        title: 'Item Operate',
        align: 'center',
        events: operateEvents,
        formatter: operateFormatter
    }
    ],
    formatNoMatches: function () {
        return "This table is empty...";
    }

});

有人如何自动生成标题吗？

Answer 1

从一个平面 json 文件填充绝对是可能的，但比从一个单独的（更小和准备好的）数据请求更难，因为标题和其他属性“可能”必须被猜测。

我将展示基本方法，然后告诉你如何使它工作，如果卡在一个你可以或不能影响格式的平面文件（重要点，请参阅末尾的注释）。

---

发出单独的 ajax 请求，填充 var colArray = []，或直接在 done 回调中传递。

例如在回调中（.done(),.success(), 等）也调用了包含该表的js init代码的函数。

你可以让它看起来像这样：

function initTable(cols) {
    cols.push({
            field: 'Actions',
            title: 'Item Operate',
            align: 'center',
            events: operateEvents,
            formatter: operateFormatter
        });
    $("#table").bootstrapTable({
        height: getHeight(),
        columns: cols,
        formatNoMatches: function () {
            return "This table is empty...";
        }

    });
}

$(document).ready(function(){
    $.ajax({
      method: "POST",
      url: "data/getColumns",
      // data: { context: "getColumns" }
      datatype: "json"
    })
    .done(function( data ) {
       console.log( "getCols data: ", data );
       // Prep column data, depending on what detail you sent back
       $.each(data,function(ind,val){
           data.sortable = true;
       });
       initTable(data);
    });
});

---

现在，如果您实际上被一个平面文件所困扰，请将 ajax 指向该文件，然后意识到问题是您是否可以编辑内容。

如果是，则添加一个columns 数组，其中包含您需要帮助构建列数组的任何基本数据（标题、字段名等）。然后使用 responseHandler 如果需要剥离列数组，如果它在加载到表时导致问题。

http://bootstrap-table.wenzhixin.net.cn/documentation/#table-options http://issues.wenzhixin.net.cn/bootstrap-table/（点击“查看源代码”）。

---

如果不是，您不能编辑内容，并且只有字段名，然后查看在 .done() 处理程序中使用任何字符串操作（str_replace() 等），您需要使其看起来像您想要的方式.