bootstraptable 页面多表格合计行宽度设置与隐藏

最新推荐文章于 2024-08-16 11:39:03 发布

桀骜浮沉

最新推荐文章于 2024-08-16 11:39:03 发布

阅读量2.5k

点赞数 3

分类专栏：前端基础文章标签： bootstraptable 页面多表格合计行宽度设置与隐藏 bootstraptable 合计行宽度设置与隐藏

本文链接：https://blog.csdn.net/weixin_45742032/article/details/103361608

版权

前端基础专栏收录该内容

22 篇文章 1 订阅

订阅专栏

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();
            }
        }
    }