bootstrap table 列求和
<div class="modal fade in" id="_modalDialog" tabindex="1" role="dialog" aria-labelledby="modalLabel"
style="display: block;">
<div class="modal-dialog" aria-hidden="true" style="width:1520px;height:600px">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close"
type="button">关闭</button>
<h4 class="modal-title">预算调整预览</h4>
</div>
<div class="col-lg-5">
<div class="text-left"><font style="color:red "><h4>调出金额合计:<span id="totalId"></span></h4></font></div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<section class="panel">
<table class="table table-hover" id="oaTableId"></table>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<script th:inline="javascript">
/*<![CDATA[*/
//设置查询条件,把分页,查询条件,排序等信息拼接成一个models字符串对象传递至后台
//var batchId=[[${batchId}]];
$(function(){
//初始化Table
$('#oaTableId').bootstrapTable({
url : 'taskAgentsController/getAdjustDetailList.json', //请求后台的URL(*)
method: 'GET',
sidePagination : "client", //分页方式:client客户端分页,server服务端分页(*)
pagination : true, //是否显示分页(*)
queryParams : queryParams, //分页
pageSize : 10, //每页显示的记录数
pageNumber : 1, //当前第几页
pageList : [ 10, 25, 50, 100 ], //记录数可选列表
//showFooter: true, 方式一列求和
responseHandler: function (res) {
return res.data;
},
//方式二列求和
onLoadSuccess: function (res) { //加载成功时执行
var sum_1 = 0;
for (var i=0;i<res.length;i++) {
sum_1 +=parseFloat(res[i].exportMoney);
}
document.getElementById("totalId").innerText=sum_1.toFixed(2)+" RMB";//toFixed(2),保留2位小数,避免js中小数相加小数点后面多出很多位
},
columns : [
{title: '调整类型', field: 'adjustType', visible: true, align: 'center', valign: 'middle'},
{title: '申请日期', field: 'applyDate', visible: true, align: 'center', valign: 'middle'},
{title: 'OA流程编号', field: 'processCode', visible: true, align: 'center', valign: 'middle'},
{title: '申请组织', field: 'applyOrganization', visible: true, align: 'center', valign: 'middle'},
{title: '申请部门', field: 'applyDepartment', visible: true, align: 'center', valign: 'middle'},
{title: '是否涉及人力成本', field: 'flag', visible: true, align: 'center', valign: 'middle'},
{title: '调出组织', field: 'exportOrganization', visible: true, align: 'center', valign: 'middle'},
{title: '调出部门', field: 'exportDepartment', visible: true, align: 'center', valign: 'middle'},
{title: '调出科目', field: 'exportSubject', visible: true, align: 'center', valign: 'middle'},
{title: '调出月份', field: 'exportMonth', visible: true, align: 'center', valign: 'middle'},
{title: '调出金额', field: 'exportMoney', visible: true, align: 'center', valign: 'middle'
/* footerFormatter: function (value) { // showFooter: true, 非常重要
var count = 0;
for (var i in value) {
count += parseFloat(value[i].exportMoney);
}
alert(count)
return count;
} */
},
{title: '费控余额', field: 'costControl', visible: true, align: 'center', valign: 'middle'},
{title: '调入组织', field: 'importOrganization', visible: true, align: 'center', valign: 'middle'},
{title: '调入部门', field: 'importDepartment', visible: true, align: 'center', valign: 'middle'},
{title: '调入科目', field: 'importSubject', visible: true, align: 'center', valign: 'middle'},
{title: '调入月份', field: 'importMonth', visible: true, align: 'center', valign: 'middle'},
{title: '调入金额', field: 'importMoney', visible: true, align: 'center', valign: 'middle'},
{title: '调整原因', field: 'adjustReason', visible: true, align: 'center', valign: 'middle'}
]
});
});
//参数
function queryParams(params) {
var batchId=[[${batchId}]];
var param={"batchId":batchId};
return param;
} /*]]>*/
</script>
方式二效果展示:

bootstrap table 列求和的更多相关文章
- 关于如何解决bootstrap table 列 切换 刷新 高度不一样
在使用bootstrap table时候,碰到bootstrap table 列 切换 刷新 高度不一样的问题,如图所示: 解决这个问题很简单,在你的页头加一句<!DOCTYPE html> ...
- Bootstrap Table列宽拖动的方法
在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
- bootstrap table 标题列重复
使用bootstrap table生成表格,出现一个奇怪问题,标题列重复.查了一大堆资料,没有找到可以解决问题的. 以为是类库版本的问题,全部替换成了example中的引用,还是这个问题. 后来仔细查 ...
- [转] BootStrap table增加一列显示序号
原文地址:https://blog.csdn.net/aboboo5200/article/details/78839208 最近由于项目需要,使用BootStrap table做数据展示,其中要在第 ...
- [转]bootstrap table 动态列数
原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...
- bootstrap table 怎么实现前两列固定冻结?
$("#Table").bootstrapTable('destroy').bootstrapTable({ pagination: true,//分页 minimumCountC ...
- BootStrap table使用
bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...
- JS组件系列——表格组件神器:bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
随机推荐
- Hisat2 bowtie2比对结果解读(Hisat2 Alignment summary)
RNA-seq数据的比对结果怎么解读?网上有很多人问,这里做一个大致的总结. Hisat2和bowtie2比对后产生的Alignment summary的格式是一样的,如下: Alignment su ...
- 2017-2018-2 20165327 实验三《敏捷开发与XP实践》实验报告
2017-2018-2 20165327 实验三<敏捷开发与XP实践>实验报告 实验三 <敏捷开发与XP实践> 一.实验报告封面 课程:Java程序设计 班级:1653 姓名: ...
- CSS3实现烟花特效 --web前端
烟花特效,比较简单,直接贴代码了…… <!DOCTYPE html><html lang="en"><head> <meta charse ...
- LeetCode--434--字符串中的单词数
问题描述: 统计字符串中的单词个数,这里的单词指的是连续的不是空格的字符. 请注意,你可以假定字符串里不包括任何不可打印的字符. 示例: 输入: "Hello, my name is Joh ...
- 纯CSS方块转化梯形动画
http://jasonning92.github.io/JasonsBlog/pages/%E7%BA%AFCSS%E6%96%B9%E5%9D%97%E8%BD%AC%E5%8C%96%E6%A2 ...
- python3 mail
# !usr/bin/python3# -*-coding=UTF-8-*-import smtplib # python 对SMTP的支持,smtplib这个库负责发送邮件from email.mi ...
- New Roads CodeForces - 746G (树,构造)
大意:构造n结点树, 高度$i$的结点有$a_i$个, 且叶子有k个. 先确定主链, 然后贪心放其余节点. #include <iostream> #include <algorit ...
- 『Re』正则表达式模块_常用方法记录
『Re』知识工程作业_主体识别 一个比较完备的正则表达式介绍 几个基础函数 re.compile(pattern, flags=0) 将正则表达式模式编译成一个正则表达式对象,它可以用于匹配使用它的m ...
- Linux在shell中输入历史命令
在Linux的shell中,经常输入的命令有很多雷同,甚至是一样的, 如果是长命令,再次敲一遍效率真的是很低, 不过可以通过Ctl+r, 查找history中以前输入的命令,很是好用. 按Ctrl+ ...
- Rail_UVa514_栈
/* https://vjudge.net/problem/UVA-514 */ #include "pch.h" #include<iostream> #includ ...