若依框架前后端不分离-多行表头设计
需要注意checkbox也需要设置行列,不然显示不出来。
·
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
}
]
]
};
更多推荐
已为社区贡献12条内容
所有评论(0)