问题遇到的现象和发生背景
在一个周报列表里面,要展示本月所有周的周报,但是每周的周报应该是不一样的
问题相关代码,请勿粘贴截图
而目前使用js初始化table的方式创建表格,此处的columns的每个元素则对应一个后台返回的对象,但是我想在后台返回一个list,而columns的元素能否根据后台的list遍历然后生成对应数量的表头?以达到可以查看历史周报的效果。
$(function () {
$("#tb_user_test").bootstrapTable({ // 对应table标签的id
url: WEB_ROOT + "/weekly/list", // 获取表格数据的url
method: "POST",
contentType: "application/json", //请求格式
dataType: "json", //返回数据的格式
cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
striped: true, //表格显示条纹,默认为false
pagination: false, // 在表格底部显示分页组件,默认false
pageList: [50, 20], // 设置页面可以显示的数据条数
pageSize: 50, // 页面数据条数
pageNumber: 1, // 首页页码
sidePagination: "server", // 设置为服务器端分页
sortName: 'id', // 要排序的字段
sortOrder: 'desc', // 排序规则
showHeader: true,
toolbar: '#toolbar',
responseHandler: function (res) {
return {
"total": res.data.total,
"rows": res.data.list
}
},
queryParams: getParams(),
columns: [
[{
field: 'realName', // 返回json数据中的name
title: '团队成员', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
rowspan: 2,
}, {
title: '周报', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
colspan: 2,
}, {
title: "操作",
align: 'center',
valign: 'middle',
width: 160, // 定义列的宽度,单位为像素px
rowspan: 2,
// formatter: 'operation'
}],
[{
field: 'completionStatus',
title: '本周完成情况',
align: 'center',
valign: 'middle',
editable: {
type: 'textarea',
title: '本周完成情况',
valign: 'middle',
tpl: "<textarea style='width: 400px;height: 200px;'>",
// placement: 'right',//单元格右侧显示文本编辑
emptytext: "点击此处填写",
validate: function (value) {
/*if (value.length > 100) {
return "内容链接不能超过100个字符!";
}*/
if (!$.trim(value)) {
return "内容不能空!";
}
},
toggleDisabled: function (isEnable) {
if (isEnable) {
this.enable();// 可编辑
} else {
this.disabled();// 不可编辑
}
}
}
}, {
field: 'planWeek',
title: '下周计划',
align: 'center',
valign: 'middle',
editable: {
type: 'textarea',
title: '下周计划',
// placement: 'right',//单元格右侧显示文本编辑
emptytext: "点击此处填写",
tpl: "<textarea style='width: 400px;height: 160px;'>",
validate: function (value, row, index) {
if (!$.trim(value)) {
return "内容不能空!";
}
},
toggleDisabled: function (isEnable) {
if (isEnable) {
this.enable();// 可编辑
} else {
this.disabled();// 不可编辑
}
}
}
},],
],
}
}