bootstrap table合计行单元格隐藏和列宽设置

合计行单元格隐藏和列宽设置

在表格加载执行函数onPostBody中添加调用的方法

 var templateTableParams = {
        classes: "table table-bordered table-hover",
        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 = {
                maindjh: $('#maindjh').val()
            };
            return params;
        },
        columns:  [
            { checkbox: true },
            {  title: "序号", align:'center', halign:"center", width:'50px', formatter: function (value, row, index) {  return index + 1;  },
                footerFormatter: function (value) {
                    return '合计';
                }},
            {  field: 'jhyc', title: "计划月次" , width:'70px',align:"center",halign:"center"},
            {  field: 'lxdh', title:"计划单号",halign:"center", width:'100px', formatter :'paramsMatter'},
            {  field: 'gyfl', title: "物资分类",halign:"center",align:"center" , width:'70px', formatter :'paramsMatter'},
            {  field: 'itemCode', title: "物资编码",halign:"center", width:'200px',sortable:true, formatter :'paramsMatter' },
            {  field: 'itemName', title: "物资名称",halign:"center" , width:'100px' , sortable:true,formatter :'paramsMatter'},
            {  field: 'cz', title: "物资属性" ,halign:"center" , width:'120px', formatter :'paramsMatter' },
            {  field: 'dw', title: "计量<br/>单位" ,align:'center', width:'45px',halign:"center"  },
            {  field: 'xqsl', title: "需求数量",halign:"center", width:'70px',align:'right',
                footerFormatter: function (value) {
                    var count = 0; for (var i in value) { count += value[i].xqsl; }
                    return count.toFixed(2); }  },
            {  field: 'jhsl', title: "计划数量",halign:"center", width:'70px',align:'right',
                footerFormatter: function (value) {
                    var count = 0; for (var i in value) { count += value[i].jhsl; }
                    return count.toFixed(2); }   },
            {  field: 'kcsl', title: "实际库存" ,halign:"center", width:'70px',align:'right',
                footerFormatter: function (value) {
                    var count = 0; for (var i in value) { count += value[i].kcsl; }
                    return count.toFixed(2); }  },
            {  field: 'kykc', title:"可用库存" ,halign:"center", width:'70px',align:'right',
                footerFormatter: function (value) {
                    var count = 0; for (var i in value) { count += value[i].kykc; }
                    return count.toFixed(2); }  },
            {  field: 'zts', title: "可用在途",halign:"center", width:'70px',align:'right',
                footerFormatter: function (value) {
                    var count = 0; for (var i in value) { count += value[i].zts; }
                    return count.toFixed(2); }   },
            {  field: 'orderQtyLastYear', title: "上一年消耗量", width:'100px',align:'right' },
            { field: 'cgsl', title:"采购数量",halign:"center", width:'70px',align:'right',
                footerFormatter: function (value) {
                    var count = 0; for (var i in value) { count += value[i].cgsl*1; }
                    return count.toFixed(2); }   },
            { field: 'xqrq', title:"需求日期",halign:"center" , width:'150px' ,sortable:true, formatter :'paramsMatter'},
            { field: 'cgjg', title: "采购结果", width:'90px' ,halign:"center",
                formatter: function(value, row, index){
                    if(row.cgsl==0){
                        return '库存满足';
                    }else if (row.kykc>0){
                        return  '部分采购';
                    }else {
                        return  '采购计划';
                    }
                }
            },
            { field: 'bz', title:"备注",halign:"center" , width:'100px', formatter :'paramsMatter'  },
            { field: 'orderNo', title:"合同号" ,halign:"center" , width:'100px', formatter :'paramsMatter' },
            { field: 'mxid', title: "mxid", width:'100px', visible:false }
        ],
        cardView:(function(){ return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent); })(),
        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("查询结果为空");
            }
        }

    };
    //设置合计列宽度
    function merge_footer() {
        //获取table表中footer 并获取到这一行的所有列
        var footer_tbody = $('.fixed-table-footer table tbody');
        var footer_tr = footer_tbody.find('>tr');
        var footer_td = footer_tr.find('>td');
        var footer_td_1 = footer_td.eq(0);
        for(var i=0;i<footer_td.length-1;i++) {
                footer_td.eq(i).hide();//隐藏单元格
            if(i==1){
                footer_td.eq(i).attr('width', "100px").show();//显示单元格并设置列宽
            }
            if(i==8){
                footer_td.eq(i).attr('width', "690px").show();
            }
            if(i>8&&i<14){
                footer_td.eq(i).attr('width', "70px").show();
            }
            if(i==14){
                footer_td.eq(i).attr('width', "100px").show();
            }
            if(i==15){
                footer_td.eq(i).attr('width', "70px").show();
            }
        }
        //设置跨列
        //  footer_td_1.attr('colspan', 6).show();
        //这里可以根据自己的表格来设置列的宽度 使对齐
        //  footer_td_1.attr('width', "50px").show();

    }

页面效果展示