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

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

 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,//合计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=truepagination: 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();}

页面效果展示

bootstrap table合计行单元格隐藏和列宽设置相关推荐

excel 根据单元格内容自动调整列宽
excel 根据单元格内容自动调整列宽 CreateTime--2018年5月28日08:49:40 Author:Marydon 1.情景展示单元格宽度超过了列宽 2.解决方案第一步:同时选中A ...
JXL 对excle 操作（单元格合并，列宽，格式等）《二》
一. 数据格式化在Excel中不涉及复杂的数据类型,能够比较好的处理字串.数字和日期已经能够满足一般的应用. 1. 字串格式化字符串的格式化涉及到的是字体.粗细.字号等元素,这些功能主要由Writ ...
openpyxl对execl操作（单元格边框、列宽、单元格内容对齐）
设置单元格边框 import openpyxl from openpyxl import load_workbook from openpyxl.styles import Font, Color, ...
vue 导出excel,支持单元格合并,背景色,列宽,字体大小等
npm下载 npm i xlsx.full.min npm i xlsx-style 关键代码如下 downloadExl(data, name, datab) {const wopts = {boo ...
layui table 可编辑单元格 JS实现通过键盘上下左右键光标焦点移动到旁边的编辑行/列
layui table 可编辑单元格 JS实现通过键盘上下左右键光标焦点移动到旁边的编辑行/列类似效果上下左右键实现的代码 layui.config({base: '/static/layuia ...
layui中table监听单元格_最全总结 | 聊聊 Python 办公自动化之 PPT（中）
点击上方 "AirPython",选择 "加为星标" 第一时间关注 Python 技术干货! 1. 前言上一篇文章简单地介绍了 PPT 的文档结构,并使用 p ...
html 拖拽选择表格,JS拖动选择table里的单元格完整实例【基于jQuery】
本文实例讲述了JS拖动选择table里的单元格.分享给大家供大家参考,具体如下: 用JS 实现类似Excel里面动态选择单元格的例子,从网上得到的例子,先记录在这里,以后参考用. www.jb51.n ...
rowspan table布局_css如何实现table表格的单元格合并？colspan和rowspan合并单元格（实例）...
在前端开发中,html 表单是经常被使用到的,表单可以直观的把信息展现出来,有很好的交互功能:在表单中可以把同一类的信息合并在一起显示,这就需要把同一类的单元格合并在一起,那么怎样才能用css合并单元 ...
html语言的td合并,table标签合并单元格（包括行和列的合并）的方法
刘代码已经在table标签的使用方法中介绍过该标签的一些具体用法,但这次,我们要讲解的是如何合并table表格中的单元格,包括行的合并以及列的合并方法 table表格单元格的合并,主要分为两种:跨行合 ...
html5合并单元格边框线,table边框表头单元格空间合并等设置，
table边框表头单元格空间合并等设置, 表格由标签定义).字母 td 指表格数据(table data),即数据单元格的内容.数据单元格可以包含文本.图片.列表.段落.表单.水平线.表格等等. 1 ...

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

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

bootstrap table合计行单元格隐藏和列宽设置相关推荐

最新文章

热门文章