bootstraptable 页面多表格合计行宽度设置与隐藏
bootstraptable 页面多表格合计行宽度设置与隐藏
页面效果展示
HTML部分
<table id="payment_detail_table"></table>
<table id="payment_table2" class="payment_table2"></table>
编写js为表格添加数据并且在onLoadSuccess方法或者onLoadSuccess方法中调用合计行样式处理方法merge_footer()
//第一张表数据
var templateTableParams = {
classes: "table table-bordered table-hover",
url: "后台访问URL",
method: 'post',
contentType: "application/x-www-form-urlencoded",
dataType: "json",
cache: false, //是否使用缓存，默认为true
striped: true, //是否显示行间隔色
singleSelect: true, //单选
clickToSelect: true, //是否启用点击选中行
showFooter: true,//合计
height:120,
queryParams: function () {
var params = {
maindjh: '${puFksqdMain.djh}'
};
return params;
},
columns: [
// {
// checkbox: true
// },
{
title: '序号', halign: "center", align: 'center', width: '50px',
formatter: function (value, row, index) {
return index + 1;
},
footerFormatter: function (value) {
return '合计';
}
},
{
field: 'hth', title: '合同号', halign: "center", width: '100px', formatter :'paramsMatter'
},
{
field: 'xshth', title: '销售合同号', width: '100px', halign: "center", formatter :'paramsMatter'
},
{
field: 'rq', title: '合同日期', width: '70px', halign: "center", formatter :'paramsMatter'
},
{
field: 'htje', title: '合同金额', width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].htje;
}
return count.toFixed(2);
}
},
{
field: 'fkje', title: '已付款金额', width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].fkje;
}
return count.toFixed(2);
}
},
{
field: 'htqkje', title: '合同欠款金额', width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].htqkje;
}
return count.toFixed(2);
}
},
{
field: 'shzje', title: '审核中金额', width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].shzje;
}
return count.toFixed(2);
}
},
{
field: 'ksqje', title: '可申请金额', width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].ksqje;
}
return count.toFixed(2);
}
},
{
field: 'sqfkje', title: '申请付款金额', width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].sqfkje;
}
return count.toFixed(2);
}
},
{
field: 'fkzl', title: '付款种类', width: '70px', halign: "center", formatter :'paramsMatter'
}
],
cardView: (function () {
return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
})(),
trimOnSearch: true,
onlyInfoPagination: false,//显示总记录数 必须打开pagination=true
pagination: false, //显示分页
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页记录数
pageList: [5, 10, 20], //可供选择的每页的行数
idField: 'id',
uniqueId: 'id',
smartDisplay: false,
onPostBody: function (data) {
merge_footer();
},
onLoadSuccess: function (data) {
if (data.length == 0) {
layer.msg("查询结果为空");
}
}
};
//第二张表数据
var templateTableParams2 = {
classes: "table table-bordered table-hover ",
url: "访问后台URL",
method: 'post',
contentType: "application/x-www-form-urlencoded",
dataType: "json",
cache: false, //是否使用缓存，默认为true
striped: true, //是否显示行间隔色
singleSelect: true, //单选
clickToSelect: true, //是否启用点击选中行
showFooter: true,//合计
queryParams: function () {
var params = {
gys: $('#gys').val()
};
return params;
},
columns: [
// {
// checkbox: true
// },
{
title: '序号', halign: "center", align: 'center', width: '50px',
formatter: function (value, row, index) {
return index + 1;
},
footerFormatter: function (value) {
return '合计';
}
},
{
field: 'hth', title: '合同号', width: '80px', halign: "center", formatter :'paramsMatter'
},
{
field: 'xshth', title: '销售合同号', width: '80px', halign: "center", formatter :'paramsMatter'
},
{
field: 'rq', title: '合同日期', width: '70px', align: 'center', halign: "center", formatter :'paramsMatter'
},
{
field: 'htje', title: '合同金额', width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].htje;
}
return count.toFixed(2);
}
},
{
field: 'fkje', title: '已付款金额', width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].fkje;
}
return count.toFixed(2);
}
},
{
field: 'htqkje', title: '合同欠款金额', width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].htqkje;
}
return count.toFixed(2);
}
},
{
field: 'fpje', title: '已开发票金额', width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].fpje;
}
return count.toFixed(2);
}
}
],
cardView: (function () {
return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
})(),
trimOnSearch: true,
onlyInfoPagination: false,//显示总记录数 必须打开pagination=true
pagination: false, //显示分页
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页记录数
pageList: [5, 10, 20], //可供选择的每页的行数
idField: 'id',
uniqueId: 'id',
smartDisplay: false,
onLoadSuccess: function (data) {
if (data.length == 0) {
layer.msg("查询结果为空");
}
},
formatNoMatches : function() {
return '';
}
};
var trueHeight = document.documentElement.clientHeight-5;
var startHeight = document.body.offsetHeight;
templateTableParams2.height = trueHeight - startHeight-130;
$('#payment_detail_table').bootstrapTable(templateTableParams);
var templateTableParams2 = {
classes: "table table-bordered table-hover ",
url: "${ctx}/payment/contractPamentCondition.z",
method: 'post',
contentType: "application/x-www-form-urlencoded",
dataType: "json",
cache: false, //是否使用缓存，默认为true
striped: true, //是否显示行间隔色
singleSelect: true, //单选
clickToSelect: true, //是否启用点击选中行
showFooter: true,//合计
queryParams: function () {
var params = {
gys: $('#gys').val()
};
return params;
},
columns: [
// {
// checkbox: true
// },
{
title: '序号', halign: "center", align: 'center', width: '50px',
formatter: function (value, row, index) {
return index + 1;
},
footerFormatter: function (value) {
return '合计';
}
},
{
field: 'hth', title: '合同号', width: '80px', halign: "center", formatter :'paramsMatter'
},
{
field: 'xshth', title: '销售合同号', width: '80px', halign: "center", formatter :'paramsMatter'
},
{
field: 'rq', title: '合同日期', width: '70px', align: 'center', halign: "center", formatter :'paramsMatter'
},
{
field: 'htje', title: '合同金额', width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].htje;
}
return count.toFixed(2);
}
},
{
field: 'fkje', title: '已付款金额', width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].fkje;
}
return count.toFixed(2);
}
},
{
field: 'htqkje', title: '合同欠款金额', width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].htqkje;
}
return count.toFixed(2);
}
},
{
field: 'fpje', title: '已开发票金额', width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].fpje;
}
return count.toFixed(2);
}
}
],
cardView: (function () {
return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
})(),
trimOnSearch: true,
onlyInfoPagination: false,//显示总记录数 必须打开pagination=true
pagination: false, //显示分页
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页记录数
pageList: [5, 10, 20], //可供选择的每页的行数
idField: 'id',
uniqueId: 'id',
smartDisplay: false,
onLoadSuccess: function (data) {
if (data.length == 0) {
layer.msg("查询结果为空");
}
},
formatNoMatches : function() {
return '';
}
};
$('#payment_detail_table').bootstrapTable(templateTableParams);
$('#payment_table2').bootstrapTable(templateTableParams2);
merge_footer方法编写
//设置合计列宽度
function merge_footer() {
//获取table表中footer 并获取到这一行的所有列
var footer_tbody = $('.fixed-table-footer table tbody');
var footer_tr = footer_tbody.find('>tr');
//footer_tr中包含页面所有合计行的内容
var footer_td = footer_tr.find('>td');
for(var i=0;i<footer_td.length-1;i++) {
footer_td.eq(i).hide();
//第一张表格合计行宽度设置
if(i==0){
footer_td.eq(i).attr('width', "70px").show();
}
if(i==1){
footer_td.eq(i).attr('width', "380px").show();
}
if(i>3&&i<10){
footer_td.eq(i).attr('width', "99px").show();
}
if(i==10){
footer_td.eq(i).attr('width', "99px").show();
}
//第二张表格合计行宽度设置
if(i==11){
footer_td.eq(i).attr('width', "100px").show();
}
if(i==14){
footer_td.eq(i).attr('width', "465px").show();
}
if(i>=15&&i<=18){
footer_td.eq(i).attr('width', "140px").show();
}
}
}