weixin_44064972 2022-01-03 16:29 采纳率: 50%
浏览 74

Bootstrap table组件 如何做到表头重复,内容不重复?(语言-javascript)

问题遇到的现象和发生背景

在一个周报列表里面,要展示本月所有周的周报,但是每周的周报应该是不一样的

img

问题相关代码,请勿粘贴截图

而目前使用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();// 不可编辑
                        }
                    }
                }
            },],
        ],
    }
}
  • 写回答

1条回答 默认 最新

  • CSDN专家-Time 2022-01-03 16:42
    关注

    那你就把columns写成动态的json啊 根据你返回的数据长度做json数据

    评论

报告相同问题?

问题事件

  • 创建了问题 1月3日

悬赏问题

  • ¥15 软件供应链安全是跟可靠性有关还是跟安全性有关?
  • ¥15 电脑蓝屏logfilessrtsrttrail问题
  • ¥20 关于wordpress建站遇到的问题!(语言-php)(相关搜索:云服务器)
  • ¥15 【求职】怎么找到一个周围人素质都很高不会欺负他人,并且未来月薪能够达到一万以上(技术岗)的工作?希望可以收到写有具体,可靠,已经实践过了的路径的回答?
  • ¥15 Java+vue部署版本反编译
  • ¥100 对反编译和ai熟悉的开发者。
  • ¥15 带序列特征的多输出预测模型
  • ¥15 Python 如何安装 distutils模块
  • ¥15 关于#网络#的问题:网络是从楼上引一根网线下来,接了2台傻瓜交换机,也更换了ip还是不行
  • ¥15 资源泄露软件闪退怎么解决?