要做一个月考勤统计,致使表头及数据会根据搜索月份发生变化,网上找了很多办法
比如博主:阿布布_0410
或者博主:Answerlzd
还有很多复制粘贴的帖子均不好使,自己经过研究+瞎蒙 终于搞出来了,很简单!
主要思路
1.通过搜索条件,ajax异步去后台获取需要展示的表头,页面进行组装
2.调用bootstrap
3.没了…
function getTableColumn() {
$.ajax({
type: "POST",
url: "/getMonthHead",//这里是异步获取表头的URL,你需要改
async: true,
data: {"month": $("#month").val()},//这里改成你自己的参数
error: function (request) {
$.modal.alertError("系统错误");
},
success: function (data) {
//我这里data后台返回的是List<String> 这种类型的
var options = {
url: prefix + "/list", //这里是异步获取表格数据的URL,你需要改
modalName: "人员出勤记录",//需要改 或者直接为空
showExport: true, //要不要都行,不要就删了
columns: [{
checkbox: true
},
//以下三个花括号因为我有公用的三列,如果你没有就全删了
{
field: 'personName',
title: '员工姓名',
sortable: false
}, {
field: 'dept',
title: '部门',
sortable: false
}, {
field: 'post',
title: '岗位',
sortable: false
}
]
};
//这里遍历返回的表头集合,并组装到options里
$.each(data, function (i, o) {
var param = {};
param.field = o;
param.title = o;
options.columns.push(param);
})
**$.table.destroy();//关键部分:刷新表头必须销毁原表格
$.table.init(options);**
}
});
}
上面加粗的两行代码说明一下
$.table.destroy();
如果你的是原生bootstrap,那正确的写法应该是
$("#你的table唯一ID").bootstrapTable('destroy');
$.table.init(options);
如果你的是原生bootstrap,那正确的写法应该类似
$("#你的table唯一ID").bootstrapTable({
url: options.url, // 请求后台的URL(*)
contentType: "application/x-www-form-urlencoded", // 编码类型
method: 'post', // 请求方式(*)
cache: false, // 是否使用缓存
height: options.height, // 表格的高度
striped: options.striped, // 是否显示行间隔色
sortable: true, // 是否启用排序
sortStable: true, // 设置为 true 将获得稳定的排序
sortName: options.sortName,
... //这里省略了其他配置
});
然后每次条件查询调用一下getTableColumn()就好了