1.要实现的表头:
在这里插入图片描述2.html表格内容:
需要注意:checkbox也需要设置行列,不然显示不出来。

$(function () {
        var prefix = ctx + "condition/" + rounds
        var options = {
            id: "bootstrap-table2",
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            importUrl: prefix + "/importData",
            modalName: "***",
            toolbar: "toolbar2",
            showFooter: true,
            uniqueId: 'id',
            footerStyle: footerStyle,
            escape: true,
            showPageGo: true,
            rememberSelected: true,
            columns: [
                // 每一行是一个【】
                [
                    {
                        checkbox: true,
                        align: 'center',
                        colspan: 1,
                        rowspan: 3
                    },
                    {
                        field: 'id',
                        title: '自增主键',
                        align: 'center',
                        colspan: 1,
                        rowspan: 3,
                        visible: false
                    },
                    {
                        // field: 'num',
                        title: '序号',
                        align: 'center',
                        colspan: 1,
                        rowspan: 3,
                        formatter:function (value,row,index){
                            return $.table.serialNumber(index);
                        }
                    },
                    {
                        field: 'unit',
                        title: '单位',
                        align: 'center',
                        colspan: 1,
                        rowspan: 3,
                        // sortable: true,
                        formatter: function (value, row, index) {
                            return '<a href="javascript:void(0)" onclick="f(\'' + row.unit + '\')">' + $.table.selectDictLabel(datas, value) + '</a>';
                        }
                    },
                    {
                        field: 'rounds',
                        title: '*轮次',
                        align: 'center',
                        colspan: 1,
                        rowspan: 3,
                    },
                    {
                        field: 'isDelete',
                        align: 'center',
                        colspan: 1,
                        rowspan: 3,
                        title: '*时间',
                        footerFormatter: function (value) {
                            return "总计";
                        }
                    },
                    {
                        field: 'sumPeopleTalk',
                        align: 'center',
                        colspan: 1,
                        rowspan: 3,
                        title: '*谈话人次',
                        footerFormatter: function (value) {
                            var sumBalance = 0;
                            for (var i in value) {
                                sumBalance += parseFloat(value[i].sumPeopleTalk);
                            }
                            return sumBalance;
                        }
                    },
                    {
                        field: 'numLetterCallVisit',
                        align: 'center',
                        colspan: 1,
                        rowspan: 3,
                        title: '**举报件次',
                        footerFormatter: function (value) {
                            var sumBalance = 0;
                            for (var i in value) {
                                sumBalance += parseFloat(value[i].numLetterCallVisit);
                            }
                            return sumBalance;
                        }
                    },
                    {
                        field: 'numObject',
                        align: 'center',
                        colspan: 1,
                        rowspan: 3,
                        title: '*面上问题件数', footerFormatter: function (value) {
                            var sumBalance = 0;
                            for (var i in value) {
                                sumBalance += parseFloat(value[i].numObject);
                            }
                            return sumBalance;
                        }
                    },
                    {
                        title: '*问题线索情况',
                        align: 'center',
                        rowspan: 1,
                        colspan: 8
                    },
                    {
                        field: 'numSpecialReport',
                        align: 'center',
                        rowspan: 3,
                        colspan: 1,
                        title: '*专题报告数', footerFormatter: function (value) {
                            var sumBalance = 0;
                            for (var i in value) {
                                sumBalance += parseFloat(value[i].numSpecialReport);
                            }
                            return sumBalance;
                        }
                    },
                    {
                        title: '*反馈问题件数',
                        align: 'center',
                        colspan: 5,
                        rowspan: 1,
                    },
                    {
                        title: '*整改情况',
                        align: 'center',
                        colspan: 5,
                        rowspan: 1
                    },
                    {
                        field: 'numClueRegister',
                        align: 'center',
                        rowspan: 3,
                        title: '*立案件数', footerFormatter: function (value) {
                            var sumBalance = 0;
                            for (var i in value) {
                                sumBalance += parseFloat(value[i].numClueRegister);
                            }
                            return sumBalance;
                        }
                    },
                    {
                        field: 'peopleClueRegister',
                        align: 'center',
                        rowspan: 3,
                        title: '*的立案人数', footerFormatter: function (value) {
                            var sumBalance = 0;
                            for (var i in value) {
                                sumBalance += parseFloat(value[i].peopleClueRegister);
                            }
                            return sumBalance;
                        }
                    },
                    {
                        field: 'timeMonth',
                        align: 'center',
                        rowspan: 3,
                        title: '数据更新时间',
                    }
                ],
                // 第二行
                [

                    {
                        title: '处级',
                        align: 'center',
                        colspan: 2
                    },
                    {
                        title: '科级',
                        align: 'center',
                        colspan: 2
                    },
                    {
                        title: '科级以下',
                        align: 'center',
                        colspan: 2
                    },
                    {
                        title: '合计',
                        align: 'center',
                        colspan: 2
                    },
                    {
                        field: 'numLilunluxian',
                        title: '*政策',
                        align: 'center',
                        rowspan: 2,
                        footerFormatter: function (value) {
                            var sumBalance = 0;
                            for (var i in value) {
                                sumBalance += parseFloat(value[i].numLilunluxian);
                            }
                            return sumBalance;
                        }
                    },
                    {
                        field: 'numZhanluebushu',
                        title: '*情况',
                        align: 'center',
                        rowspan: 2,
                        footerFormatter: function (value) {
                            var sumBalance = 0;
                            for (var i in value) {
                                sumBalance += parseFloat(value[i].numZhanluebushu);
                            }
                            return sumBalance;
                        }
                    },{
                    field: 'numXinshidai',
                    title: '*情况',
                    align: 'center',
                    rowspan: 2,
                    footerFormatter: function (value) {
                        var sumBalance = 0;
                        for (var i in value) {
                            sumBalance += parseFloat(value[i].numXinshidai);
                        }
                        return sumBalance;
                    }
                },
                    {
                        field: 'numJianduzhenggai',
                        title: '*问题整改情况',
                        align: 'center',
                        rowspan: 2,
                        footerFormatter: function (value) {
                            var sumBalance = 0;
                            for (var i in value) {
                                sumBalance += parseFloat(value[i].numJianduzhenggai);
                            }
                            return sumBalance;
                        }
                    },
                    {
                        field: 'sumFourLuoshi',
                        // 四个落实方面问题数量合计
                        title: '合计',
                        align: 'center',
                        rowspan: 2,
                        footerFormatter: function (value) {
                            var sumBalance = 0;
                            for (var i in value) {
                                sumBalance += parseFloat(value[i].sumFourLuoshi);
                            }
                            return sumBalance;
                        }
                    },
                    {
                        field: 'numAlreadyUnit',
                        title: '整改落实问题件数',
                        align: 'center',
                        rowspan: 2,
                        footerFormatter: function (value) {
                            var sumBalance = 0;
                            for (var i in value) {
                                sumBalance += parseFloat(value[i].numAlreadyUnit);
                            }
                            return sumBalance;
                        }
                    },
                    {
                        field: 'rateWholeCover',
                        title: '问题整改落实率',
                        align: 'center',
                        rowspan: 2,

                    },
                    {
                        field: 'numWillReform',
                        title: '制定整改措施件数',
                        align: 'center',
                        rowspan: 2,
                        footerFormatter: function (value) {
                            var sumBalance = 0;
                            for (var i in value) {
                                sumBalance += parseFloat(value[i].numWillReform);
                            }
                            return sumBalance;
                        }
                    },
                    {
                        field: 'numAlreadyReform',
                        title: '整改措施完成件数',
                        align: 'center',
                        rowspan: 2,
                        footerFormatter: function (value) {
                            var sumBalance = 0;
                            for (var i in value) {
                                sumBalance += parseFloat(value[i].numAlreadyReform);
                            }
                            return sumBalance;
                        }
                    },
                    {
                        field: 'rateReform',
                        title: '整改措施完成率',
                        align: 'center',
                        rowspan: 2,
                    }
                ],
                // 第三行
                [
                {
                    field: 'numChujiClue',
                    align: "center",
                    // 处级件数
                    title: '件数', footerFormatter: function (value) {
                        var sumBalance = 0;
                        for (var i in value) {
                            sumBalance += parseFloat(value[i].numChujiClue);
                        }
                        return sumBalance;
                    }
                },
                {
                    field: 'peopleChujiClue',
                    align: "center",
                    // 处级涉及人数
                    title: '涉及人数', footerFormatter: function (value) {
                        var sumBalance = 0;
                        for (var i in value) {
                            sumBalance += parseFloat(value[i].peopleChujiClue);
                        }
                        return sumBalance;
                    }
                },
                {
                    field: 'numKejiClue',
                    align: "center",
                    // 科级件数
                    title: '件数', footerFormatter: function (value) {
                        var sumBalance = 0;
                        for (var i in value) {
                            sumBalance += parseFloat(value[i].numKejiClue);
                        }
                        return sumBalance;
                    }
                },
                {
                    field: 'peopleKejiClue',
                    align: "center",
                    // 科级涉及人数
                    title: '涉及人数', footerFormatter: function (value) {
                        var sumBalance = 0;
                        for (var i in value) {
                            sumBalance += parseFloat(value[i].peopleKejiClue);
                        }
                        return sumBalance;
                    }
                },
                {
                    field: 'numKejiyixiaClue',
                    align: "center",
                    // 科级以下件数
                    title: '件数', footerFormatter: function (value) {
                        var sumBalance = 0;
                        for (var i in value) {
                            sumBalance += parseFloat(value[i].numKejiyixiaClue);
                        }
                        return sumBalance;
                    }
                },
                {
                    field: 'peopleKejiyixiaClue',
                    align: "center",
                    // 科级以下涉及人数
                    title: '涉及人数', footerFormatter: function (value) {
                        var sumBalance = 0;
                        for (var i in value) {
                            sumBalance += parseFloat(value[i].peopleKejiyixiaClue);
                        }
                        return sumBalance;
                    }
                },
                {
                    field: 'sumClue',
                    align: "center",
                    // *合计数量
                    title: '件数', footerFormatter: function (value) {
                        var sumBalance = 0;
                        for (var i in value) {
                            sumBalance += parseFloat(value[i].sumClue);
                        }
                        return sumBalance;
                    }
                },
                {
                    field: 'numLetterCallVisit',
                    align: "center",
                    //*合计涉及人数
                    title: '涉及人数', footerFormatter: function (value) {
                        var sumBalance = 0;
                        for (var i in value) {
                            sumBalance += parseFloat(value[i].numLetterCallVisit);
                        }
                        return sumBalance;
                    }
                },
                    {
                        checkbox: true
                    }



                ]
            ]
        };
Logo

快速构建 Web 应用程序

更多推荐