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

最新推荐文章于 2024-05-23 09:35:04 发布
最新推荐文章于 2024-05-23 09:35:04 发布
阅读量2.4k 收藏 6
点赞数 3
分类专栏： 前端基础 文章标签： bootstraptable  页面多表格合计行宽度设置与隐藏 bootstraptable  合计行宽度设置与隐藏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45742032/article/details/103361608
版权

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();
            }
        }
    }
桀骜浮沉
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
bootstrap表格（带合计行）
qq_44796977的博客
12-30 1600
bootstrap表格（带合计行） showFooter该属性就是展示合计行的 onPreBody该属性是在换页时将之前的对应的合计行清空值，否则翻页时合计值会累加，不断增加 function inittable3(bm,kj,tPoint) { var rshj=0; var ahj=0; var bhj=0; var chj=0; var dhj=0; var ehj=0; va...
element el-cascader动态加载数据
小米粒的博客
06-05 1万+
需求：1.点击下拉框请求一级数据，选择一级请求数据获得二级数据，选择二级数据获得三级数据 2.任意一项都能够被选中 实现效果： 实现过程： <el-cascader v-model="partyOrganId" :show-all-levels="false" ref="sysCascader" :props="prop" @change="handleChange($event)" clearable> ...
Bootstrap table一个页面两个表数据冲突
最新发布
mylove_2009的专栏
05-23 154
bootstrap table 多表冲突
bootstrapTable表格自定义每列数据的宽度
ccyy
02-07 4163
使用若依框架搭建的管理后台，因为table是封装好的。表格的宽度是自适应的。就想着在网上找一下属性，看能不能设置一下每一列数据的宽度。输入的稍微长一点就会这样。
bootstrap table设置列宽
芃蓉蓁蓁的博客
07-17 9191
列表宽度设置前： 第一步：需要设置css的table-layout属性值为fixed，默认auto， <style type="text/css"> .table {table-layout:fixed;} </style> table-layout可能值 描述 auto 默认。列宽度由单元格内容设定。 fixed 列宽由表格宽度和列宽度设定。 inherit 规定应该从父元素继承 table-layout 属性的值。 第二步：在每一列设置w
bootstrap-table中onLoadSuccess方法渲染从后端接口查询到的数据到接口
OceanSky的专栏
05-30 3万+
当我们取数据是从接口中取的时候直接拿到的数据并不是bootstrap-table插件默认的格式，我们可能在外面做了包装，或者我们需要在前端重新组装成插件需要的格式，这样就需要我们手动重新渲染了。 onLoadSuccess远程数据加载成功时触发成功。 bootstrapTable函数重新渲染table中的数据 load加载数据到表格中，旧数据会被替换。 onLoadSucc...
Bootstrap table设置列宽和固定表头
热门推荐
Ghjkku的博客
02-21 10万+
设置css的table-layout属性值为fixed，此时可以自己调整列宽了；再添加word-break:break-all，此时数据可以自动换行 <table id="cblx" class="table table-border" style="table-layout:fixed;word-break:break-all;"></table> table-layout可能值 描述 auto 默认。列宽度由单元格内容设定。 fixed 列宽由表
Bootstrap table表格初始化表格数据的方法
10-18
$('#table').bootstrapTable({ url: '/B_Product/GetProductData', // 后端数据源URL method: 'get', // 请求方式，可选get或post toolbar: '#toolbar', // 工具栏容器 striped: true, // 是否显示斑马线效果 ...
BootStrap table实现表格行拖拽效果
01-19
本文实例为大家分享了BootStrap table实现表格行拖拽的具体代码，供大家参考，具体内容如下 不上图了 首先还是得添加三个文件，自己上网搜搜就行 [removed][removed] [removed][removed] <link href=~/Content/...
BootStrap Table对前台页面表格的支持实例讲解
10-20
bootstrap-table是在bootstrap的基础上面做了一些封装，所以在使用bootstrap-table之前要导入的js和css，下面通过本文给大家详细介绍需要引入的文件，对bootstrap table 表格感兴趣的朋友一起看看吧
bootstrap——bootstrapTable实现隐藏列的示例
08-31
首先，BootstrapTable 提供了 `showColumn` 和 `hideColumn` 两个方法，用于在运行时动态地显示或隐藏表格中的某一列。例如，在提供的代码片段中： ```javascript $(function () { LoadingDataListOrderRealItems...
实现bootstrap table可设置列宽和可拖动列宽
11-23
修改bootstrap table设置列宽问题，增加插件和bootstrap table组合可随意拖动表格的列宽
bootstrap-table拖拽表格改变列宽
08-31
bootstrap-table拖拽表格改变列宽，兼容主流浏览器，兼容body与header对齐
bootstraptable获得所有行_bootstrap table 怎么在onLoadSuccess中获取所有的行数
weixin_30735701的博客
01-12 1040
bootstrap table 怎么在$('#tableId').bootstrapTable({}); 的方法的加载成功方法onLoadSuccess{}中获取所有的行数???例如：$('#tableId').bootstrapTable({idField:'custno' ,toolbar: '#toolbar1', //工具按钮用哪个容器striped: true, //是否...
bootstrap table添加合计行
桀骜浮沉的博客
10-22 6445
添加合计行 首先为表格添加showFooter: true属性 然后为列添加footerFormatter属性 var templateTableParams = { classes: "table table-bordered table-hover", url: "后台访问路经", method: 'post', contentT...
前端开发 - BootstrapTable使用指南
张念磊的博客
12-12 230
设置高度为灵活高度 添加高度属性 height: $(window).height() * 0.68, 添加数据统...
bootstrap table 分页不显示
smile
04-25 8602
注意：必须把属性设置为false onlyInfoPagination:false $('#mytab').bootstrapTable({ method : 'get', url : "user/getUserListPage",//请求路径 striped : true, //是否显示行间隔色 pageNumber : 1, //初始化加载第一页 pagination : ...
Bootstrap-table 使用总结
菜鸟逆袭之路
06-29 5万+
一、什么是Bootstrap-table？ 　　在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动
bootstrap table表格宽度拖动，固定表头
08-18
### 回答1： 要实现表格宽度拖动，可以使用 bootstrap-table 插件中的 resizableColumns 插件。具体使用方法如下： 1. 引入插件： ```html <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/extensions/resizable/bootstrap-table-resizable.min.js"></script> ``` 2. 初始化表格并添加插件： ```javascript $('#table').bootstrapTable({ resizableColumns: true, // 开启列宽拖动功能 columns: [{ field: 'id', title: 'ID' }, { field: 'name', title: 'Name' }, { field: 'price', title: 'Price' }] }); ``` 3. 如果需要固定表头，可以在 CSS 中添加以下样式： ```css .fixed-table-header { position: fixed; top: 0; left: 0; z-index: 999; } ``` 然后在表格的父容器中添加以下属性： ```html <div class="table-responsive"> <table id="table" data-height="460" data-show-columns="true"> ... </table> </div> ``` 其中，`table-responsive` 类用于使表格可以响应式缩放，`data-height` 属性指定表格高度，`data-show-columns` 属性用于显示列选择器。 ### 回答2： Bootstrap Table表格宽度拖动，固定表头的实现方法如下： 1. 使用bootstrap-table插件的table组件来创建表格，并设置table-layout为fixed来固定列宽。 2. 在表格的CSS样式中，设置表格容器的宽度为固定值，以便固定表格的宽度。 3. 使用bootstrap-table插件的column的width属性来设置每列的宽度。通过拖拽可调整列宽的方式来改变每列的宽度。 4. 为表格的头部区域创建一个额外的div容器，并设置其CSS样式为固定定位和指定高度。 5. 使用jQuery的scroll事件来监听滚动事件，在滚动时将表格头部的div容器进行滚动，使其保持固定在页面上方。 6. 在colgroup标签中定义每列的固定宽度，使表格的列宽度与表格头部的div容器保持一致。 综上所述，通过使用bootstrap-table插件和一些CSS样式和JavaScript代码的设置，我们可以实现Bootstrap Table表格宽度拖动和固定表头的效果。这样，无论用户拖动表格宽度还是滚动页面，表头始终会保持在页面顶部，为用户提供更好的表格浏览体验。 ### 回答3： 要实现表格宽度拖动和固定表头，可以使用 Bootstrap Table 插件结合其他一些技术来实现。 首先，引入 Bootstrap Table 插件的样式和脚本文件。在表格的容器中创建一个 `<table>` 元素，并添加相应的 `class`，如 `table table-bordered table-striped`。 接下来，使用 jQuery UI 的 resizable 方法使表格的宽度可以拖动调整大小。为表格添加一个父容器，并给父容器设置合适的宽度。然后，使用 jQuery 选择器选择表格，并调用 resizable 方法，设置拖动范围和回调函数。 为了固定表头，需要创建一个静态的表格头部。复制表格头部的内容并使用 div 包裹起来，添加对应的样式。 接下来，使用 CSS 来实现表格的固定表头。设置父容器的 `position` 为 `relative`，表格头部的 `position` 为 `absolute`。通过调整父容器的 `padding-top` 来使表格正文内容向下错开，然后用 `z-index` 来设置表格头部的层级。 最后，为了使表格正文能够滚动，添加 CSS 样式设置表格的 `overflow-x` 为 `auto`。 通过上述步骤，我们就能够实现 Bootstrap Table 表格宽度的拖动和固定表头的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

桀骜浮沉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值