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

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 文件填充绝对是可能的，但比从单独的（更薄和准备好的）数据请求填充更难，因为必须猜测标题和其他属性 'might'。

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

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

例如，在回调(.done(),.success(), ect)中也调用了包含table.

的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 数组，其中包含帮助构建列数组所需的任何基础数据（标题、字段名等）。如果在加载到 table.

时导致问题，则在需要时使用 responseHandler 剥离该列数组

http://bootstrap-table.wenzhixin.net.cn/documentation/#table-options http://issues.wenzhixin.net.cn/bootstrap-table/（点击'see source'）。

如果不是，则您无法编辑内容，并且只有字段名，然后查看在 .done() 处理程序中使用它以及您需要进行的任何字符串操作（str_replace()，等等）它看起来像你想要的样子。

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

Automatically create header from JSON file, Bootstrap-table

javascript

json

twitter-bootstrap

bootstrap-table