bootstrap table实现动态列

方案:
第一步构建动态列
js请求动态列数据然后赋值到数组结构里面

// 标题数组
var mycolumn;

$(function() {
  mycolumn = initTableColumns();
      // 请求动态列
  generateSafetyColumns(safetyViolationItems);
})

function initTableColumns() {
  // 创建一个初始colum
  var columns = [];
  columns.push({
      checkbox:true  // 第一列显示复选框
  },);
  columns.push({field : 'booth',title : '展位号',
          formatter : function(value, row, index) {
              return value.exnum;
          }
      });
  columns.push({
          field: 'booth',
          title: '参展商名称',
          formatter: function (value, row, index) {
              return value.companyname;

          }
      });
  
  columns.push({
          field : 'constructCompany',
          title : '搭建商名称',
          formatter : function(value) {
              if (value === '' || null === value || undefined === value || 'null' === value) {
                  return '-';
              } else {
                  return value;
              }

          }
      });
  
    columns.push({
          field : 'createDate',
          title : '记录日期',
          formatter : function(value, row, index) {
              return value.split(" ")[0];
          }
      })
      columns.push({
          field : 'recordTime',
          title : '当日巡查次数',
          formatter : function(value, row, index) {
              return TimeEnum[value];
          }
      });
      return columns;
}

function generateSafetyColumns(safetyViolationItems){
  $.each(safetyViolationItems, function(i, item) {
      mycolumn.push({
          field: item.violationName,
          title: item.violationName,
          align: 'center',
          width: 100,
          formatter : function(value, row, index) {
              if(null != row.safetyViolationItems[i].recordContents && undefined != row.safetyViolationItems[i].recordContents
                      && '' != row.safetyViolationItems[i].recordContents){
                  return '';
              }else{
                  return '';  
              }
          }    
      })
  })
}

第二步发起接口请求数据进行填充

function initData() {
    $('#inspectionTable').bootstrapTable({
        url : '/a/inspectionheader/listDailyInspectionData',
        toolbar : '#toolbar',

        uniqueId : 'id',

        pagination : true,

        sortOrder : "asc",

        clickToSelect : false,

        singleSelect : false,

        checkboxHeader : true,

        sidePagination : "server", // 服务端分页 server

        paginationPreText : '上一页',

        paginationNextText : '下一页',

        pageList : [ 10, 50, 100, 200, 500 ],

        queryParams : function(params) {
            var returnParam = {
                    'offset': params.offset,
                    'limit': params.limit,
                    'booth.companyname' : $("#companyname").val(),
                    'booth.exnum': $("#exnum").val(),
                    'constructCompany': $("#constructCompany").val(),
                    'recordTime': $("#recordTime").val(),
                    'createBy': $("#userName").val(),
                    'recordContent': $("#recordContent").val(),
                    'updateDate': $('#recordDate').val(),
                    'violationId': $('#violation').val(),
                    'exhibitionId': addExpo.id
                };
            if(returnParam.exhibitionId===null||returnParam.exhibitionId===""){
                delete returnParam.exhibitionId;
            }
            if(returnParam.createBy===null||returnParam.createBy===""){
                delete returnParam.createBy;
            }
            if ( $("#recordDate").val() !== '' &&  $("#recordDate").val() !== null &&  $("#recordDate").val() !== undefined) {
                let date = $("#recordDate").val();
                date = date.replace('-', '/');
                date = date.replace('-', '/')
                returnParam.updateDate = date;
            }
            var returnObj = returnParam
            returnObj.exhibitionName = addExpo.exhibitionName
            sessionStorage.setItem("returnParam", JSON.stringify(returnObj));
            
            return returnParam;
        },
        responseHandler : function(res) {
            return {                                    
                "rows" : res.rows,
                "total" : res.total
            };
        },
        pageList : [ 10, 50, 100, 200, 500 ],
        columns : mycolumn
    });

}

你可能感兴趣的:(bootstrap table实现动态列)