bootstrapTable动态显示列

 

需求：在前端界面通过多选下拉框或复选框勾选需要显示的列，提交form后表格动态刷新列

1. 在html中定义一个空的table

<table id="table_list" data-mobile-responsive="true" style="word-break:break-all; word-wrap:break-all;"></table>

2. 在js中先请求首先通过一个方法获取需要显示的列，取到返回结果后，将列对象赋值给表格

在success块中，data.columns为后端返回的数据列表的列定义。后端返回以下格式的字符串，在js处理时需要用“eval“函数将json转换为对象

columns: [{
field: 'column_1',
title: '列1',
width: '100px'
},{
field: 'column_2',
title: '列2',
width: '100px'
},

……

}]

$.ajax({
    type: "POST",
    dataType: "json",
    url: "../../table/column",
    data: {
      tableId: tableId
    },
    success: function (data) {
        // 删除表格定义
        $("#table_list").bootstrapTable('destroy');
　　　　 // 重新定义表格
        $("#table_list").bootstrapTable({
        method: "GET",
        contentType: "application/json",
        url: "../../report/table/list?" + $("#frm").serialize()，
        striped: true,
        pagination: true,
        pageSize: 10,
        pageNumber: 1,
        pageList: [10, 30, 50, 100, 500],
        search: false,
        detailView: false,
        detailFormatter: null,
        sidePagination: "server",
        queryParamsType: "undefined",
        responseHandler: function (res) {
          return {"rows": res.data, "total": res.rowsCount};
        },
        columns: eval("(" + data.columns + ")")
    });
  },
  error: function (e) {
    layer.msg(e.error);
  }
});