javascript - 从 JSON 文件、Bootstrap-table 自动创建 header

Question

我正在与 this 合作 Bootstrap 库，实际上一切正常。问题是，bootstrap-table可以根据JSON文件自动生成 header 吗？我试图找到有关这方面的任何信息，但不幸的是。现在我的 header 是从脚本生成的，如下例所示:

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...";
    }

});

有人知道如何自动生成 header 吗？

Answer 1

从平面 json 文件填充肯定是可能的，但比从单独的(更精简且预先准备好的)数据请求填充更困难，因为标题和其他属性“可能”必须被猜测。

我将展示基本方法，然后告诉您如果遇到可以或不能影响其格式的平面文件，如何使其工作(重要的一点，请参阅最后的注释)。

---

创建一个单独的ajax请求来填充var colArray = []，或者直接在done回调中传递。

例如，在回调中(.done()、.success()等)也会调用包含表的js初始化代码的函数。

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

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()) >，等)您需要使其看起来像您想要的那样。