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 '<span class="glyphicon glyphicon-remove"></span>';
              }else{
                  return '<span class="glyphicon glyphicon-ok"></span>';  
              }
          }    
      })
  })
}

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

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
    });

}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容