如何使用JavaScript为bootstrapTable添加动态JSON表头与表体数据

实现思路 #

• 不要在页面加载完成后直接初始化表格，先请求一次数据源接口，拿到返回的JSON数据结构
• 取返回数据列表的第一条记录，遍历其所有字段键名，通过forEach动态拼接符合bootstrapTable规范的columns配置数组，遍历过程中可按需配置每个字段的表头名称、对齐方式、排序权限、单元格格式化规则
• 待columns配置生成完成后，再执行bootstrapTable初始化逻辑，传入动态生成的列配置与数据源参数，表格会自动完成表头和对应TD单元格的渲染

可运行示例代码 #

HTML 结构 #

不需要提前写静态thead和th标签，只需要保留表格容器即可：

<table id="dynamicTable"></table>

JS 逻辑 #

$(function() {
  // 替换为自己的数据源接口地址
  const dataApi = 'https://examples.wenzhixin.net.cn/examples/bootstrap_table/data'

  // 提前拉取数据结构用于生成动态列
  $.get(dataApi, function(res) {
    const columns = []
    // 取第一条数据作为字段遍历依据，适配接口实际返回结构即可
    const firstRecord = res.rows[0]

    // forEach遍历所有字段生成列配置
    Object.keys(firstRecord).forEach(function(field) {
      // 可自定义字段和表头名称的映射关系
      const fieldTitleMap = {
        id: '站点ID',
        name: '客户名称',
        price: '仓储金额'
      }
      columns.push({
        field: field,
        title: fieldTitleMap[field] || field, // 未配置映射的字段默认用字段名作为表头
        align: 'center',
        valign: 'middle',
        sortable: true,
        // 如需自定义单元格内容，放开下方注释即可编写渲染逻辑
        // formatter: function(cellValue) {
        //   return `<span class="badge bg-primary">${cellValue}</span>`
        // }
      })
    })

    // 动态列生成完成后初始化表格
    $('#dynamicTable').bootstrapTable({
      url: dataApi,
      pagination: true,
      height: 450,
      locale: 'zh-CN',
      pageList: [30, 55, 80, 100],
      pageSize: 30,
      // bootstrapTable列配置要求二维数组格式，直接传入生成的列数组即可
      columns: [columns]
    })
  })
})

适配说明 #

• 如果接口返回的数据格式不符合bootstrapTable默认的{total: 总条数, rows: 数据列表}结构，初始化表格时增加responseHandler参数做格式转换即可
• 若需要实现多级合并表头，在forEach拼接columns时按照官方多级列配置格式组装二维/三维数组即可
• 若不想提前请求接口，也可在表格初始化的onLoadSuccess回调中拿到返回数据，销毁当前表格实例后用动态生成的columns重新初始化，不过提前拉取结构的方案不会重复渲染，性能更优

内容的提问来源于stack exchange，提问作者WpFinder