bootstrap的table属性已经很熟悉了，最近遇到一个问题，犹豫每个列表加载的数据需求不同，所以需要动态的更换表头。 网上有很多加载表格数据的例子，但是却没有找到如何动态加载表格，再加在数据。 虽然可以一个表格加载一种数据，但是本着学习的态度尝试了下这种方式，结果发现是可以执行的。分享下思路和实现过程，以备日后使用。
1、写接口，查询出要展示的列。注意接口中必须要有字段中文名称（columns属性的title值），字段的英文名称（columns的field字段），特别注意filed字段应该与最后查询出的列表中返回的json数据中的key保持一致，不然取不到值。
var peopleOptions;// 人口列表加载function tableItem() { peopleOptions = { method : "POST", // 使用get请求到服务器获取数据 url : path + "/api/information/people/getList", // 获取数据的地址 contentType : "application/x-www-form-urlencoded",// 重要否则POST会报错 striped : false, // 表格显示条纹 pagination : true, // 启动分页 pageSize : 10, // 每页显示的记录数 pageNumber : 1, // 当前第几页 pageList : [ 10, 20, 50 ], // 记录数可选列表 uniqueId : "id", showColumns : false, // 显示下拉框勾选要显示的列 showToggle : false, // 显示 切换试图（table/card）按钮 clickToSelect : false, // 点击可选 singleSelect : false, // 禁止多选 maintainSelected : true, // 在点击分页按钮或搜索按钮时，将记住checkbox的选择项 sortable : true, // 禁止所有列的排序 sidePagination : "server", // 表示服务端请求 后台分页 toolbar : "#toolbar",// 指明自定义的toolbar queryParamsType : "undefined", queryParams : function queryParams(params) { var param = { pageNumber : params.pageNumber, pageSize : params.pageSize, orgId : ztreeId, nodeId : ztreeId, citizenName : $("#fullname").val().trim(), sex : $("#sex").val(), age : $("#age").val().trim(), identityCode : $("#idCard").val().trim(), cellPhone : $("#isMobile").val().trim(), adress : $("#adress").val().trim(), }; return param; }, onLoadSuccess : function() { // 加载成功时执行 responseHandler : function(res) { // 格式化数据 console.log(res); if (res.data.total != undefined) tmp = { total : res.data.total, rows : res.data.rows }; if (res.data.total == undefined) tmp = { total : res.data.length, rows : res.data }; return tmp; }, columns : [ { checkbox : true, title : '全选', valign : 'middle' }, { title : '序号', field : 'number', width : '40px', align : 'center', valign : 'middle', formatter : indexFormatter }, { title : '姓名', field : 'citizenName', align : 'center', valign : 'middle', }, { title : '年龄', field : 'age', align : 'center', width : 28, valign : 'middle', formatter : ageFormatter }, { title : '性别', field : 'sex', width : 28, align : 'center', valign : 'middle', },{ title : '身份证号', field : 'identityCode', align : 'center', valign : 'middle', }, { title : '民族', field : 'nation', align : 'center', valign : 'middle', } ] }} $table = $("#table").bootstrapTable(peopleOptions);}; function getColumns() { // 加载动态表格 $.ajax({ url : path + "api/information/people/getLableColumn?ztreeId=" + ztreeId, type : 'get', dataType : "json", async : false, success : function(returnValue) { // 未查询到相应的列，展示默认列 if (returnValue.retCode == "0") { //没查到列的时候把之前的列再给它 myColumns = $table.bootstrapTable('getOptions').columns[0]; } else { // 异步获取要动态生成的列 var arr = returnValue.data; $.each(arr, function(i, item) { myColumns.push({ "field" : item.labelColumnCode, "title" : item.labelColumnName, "hide" : true, "align" : 'center', "valign" : 'middle' }); }); } console.log(myColumns); return myColumns; } });} 需要注意的是bootstrap的table提供了两个刷新的方法，一个refresh，一个refreshOptions，前者只是刷新当前表格，后者会将表格中的组件全部更新一遍，因为我们替换了url和columns，所以需要调用后者。
