添加合计行

首先为表格添加showFooter: true属性
然后为列添加footerFormatter属性

var templateTableParams = {classes: "table table-bordered table-hover",url: "后台访问路经",method: 'post',contentType: "application/x-www-form-urlencoded",dataType: "json",cache: false,     //是否使用缓存，默认为truestriped: true,    //是否显示行间隔色singleSelect: true,   //单选clickToSelect: true,  //是否启用点击选中行showFooter:true,//合计height:trueHeight,queryParams:function () {var params = {djh: $("#djh").val(),};return params;},columns: [{checkbox: true},{title: '序号',halign:"center", align:'center',formatter: function (value, row, index) {return index + 1;}, width:'50px',footerFormatter: function (value) {return '合计';}},{field: 'djh', title: '单据号',halign:"center", width:'80px'},{field: 'jhlb', title: '计划类别', align:'center',halign:"center", width:'80px'},{field: 'lrrname', title: '采购员',align:'center', halign:"center", width:'80px'},{field: 'gyfl', title: '物资类别', halign:"center", width:'100px'},{field: 'itemCode', title: '物资编码', halign:"center",formatter :'paramsMatter', width:'150px',sortable:true},{field: 'itemName', title: '物资名称', halign:"center", formatter :'paramsMatter', width:'100px',sortable:true},{field: 'cz', title: '物资属性', halign:"center", formatter :'paramsMatter', width:'100px'},{field: 'xqsl', title: '生产需求数量',halign:"center",align:'right',footerFormatter: function (value) {var count = 0;for (var i in value) { count += value[i].xqsl; }return count.toFixed(2); }, width:'100px'},{field: 'jhsl', title: '生产计划数量',halign:"center",align:'right',footerFormatter: function (value) {var count = 0; for (var i in value) { count += value[i].jhsl; }return count.toFixed(2);}, width:'100px'},{field: 'cgsl', title: '采购计划数量',halign:"center",align:'right',footerFormatter: function (value) {var count = 0; for (var i in value) { count += value[i].cgsl; }return count.toFixed(2); }, width:'100px'},{field: 'kcsl', title: '计划时库存', halign:"center",align:'right',footerFormatter: function (value) {var count = 0; for (var i in value) { count += value[i].kcsl; }return count.toFixed(2); }, width:'85px'},{field: 'cgjg', title: '采购结果', halign:"center", width:'70px'},{field: 'bz', title: '备注', halign:"center", formatter :'paramsMatter', width:'100px'},{field: 'orderNo', title: '销售合同编号', halign:"center", formatter :'paramsMatter', width:'100px'}],cardView:(function(){ return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent); })(),trimOnSearch: true,onlyInfoPagination:false,//显示总记录数  必须打开pagination=truepagination: false,      //显示分页pageNumber: 1,             //初始化加载第一页，默认第一页pageSize:10,               //每页记录数pageList:[5,10,20],     //可供选择的每页的行数idField: 'id',uniqueId: 'id',smartDisplay:false};

页面效果展示

调整合计行宽度，合计行单元格的显示和隐藏，编辑合计行内容请浏览下一篇博客“bootstrap table合计行单元格隐藏和列宽设置”
https://blog.csdn.net/weixin_45742032/article/details/103361608

bootstrap table添加合计行相关推荐

react：antd 中 table 添加合计行
用的Antd 的 UI 框架. 场景:table 中后面想添加一行合计.合计的值由后端计算提供.目前想到两种方法. 第一种:比较好维护. 第二种:可以实现功能效果,但是感觉不太优雅. 方法一:把合计行 ...
elementUI table 添加合计行，合计行放置顶部(标题下内容上)，合计行渲染所有数据的和(取后端接口数据)，合并合计单元格。
1.将show-summary设置为true就会在表格尾部展示合计行. <el-table:data="tableData"id="tableData"s ...
给一个Table添加合计行[Tips]
其实非常简单,看看这个对 northwind 的 freight 中,满足条件 freight > 100 ,所有行的汇总 sum(freight) DataRow dr = dt.NewRow ...
antd中如何给Table表格添加合计行
最近项目需求:在表格底部添加一行为金额的合计行,然后分页每页都显示,金额字段是后端返回的数据,前端不进行计算. 因为项目的UI框架使用的是Ant Design 3.x版本,找了一下Table的使用方法 ...
mysql 增加合计行_如何给SQL查询添加合计行
SQL查询是SQL数据库的核心功能,下面为您介绍给SQL查询添加合计行的方法示例,供您参考,希望对您学习SQL查询能有所帮助. .数据表t_test id 销售人员id 商品 ...
antd 表格添加合计行
ps:好坑,antd竟然没有表格合计行的功能,只好自己研究一下,总结了一个还不错的方案,下面看代码 1.添加pageSizeOptions 2.查询分页数据的时候判断pagesize 在这里,我们希望 ...
解决element-ui table show-summary合计行不显示问题
在table的底部添加合计设置show-summary就可以了但是给table加了一个固定高度话,就不显示了,其实这个合计是存在的解决办法: 1.不设置固定高度 2.在vue的生命周期update ...
antd的table遍历之后添加合计行_付费？是不可能的！20行Python代码实现一款永久免费PDF编辑工具...
专注Python.AI.大数据 @七步编程 PDF(Portable Document Format),中文名称便携文档格式是我们经常会接触到的一种文件格式,文献.文档...很多都是PDF格式.它以 ...
table 添加表行的底部边框、定制表格边框
我已经3×3的表格需要一种方法来添加边框的底部具有特定颜色中的每一行<tr>首先,我试图直接的方式,是 <tr style="border-bottom:1pt solid ...

bootstrap table添加合计行

添加合计行

bootstrap table添加合计行相关推荐

最新文章

热门文章