<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 列求和的更多相关文章

  1. 关于如何解决bootstrap table 列 切换 刷新 高度不一样

    在使用bootstrap table时候,碰到bootstrap table 列 切换 刷新 高度不一样的问题,如图所示: 解决这个问题很简单,在你的页头加一句<!DOCTYPE html> ...

  2. Bootstrap Table列宽拖动的方法

    在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...

  3. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

  4. bootstrap table 标题列重复

    使用bootstrap table生成表格,出现一个奇怪问题,标题列重复.查了一大堆资料,没有找到可以解决问题的. 以为是类库版本的问题,全部替换成了example中的引用,还是这个问题. 后来仔细查 ...

  5. [转] BootStrap table增加一列显示序号

    原文地址:https://blog.csdn.net/aboboo5200/article/details/78839208 最近由于项目需要,使用BootStrap table做数据展示,其中要在第 ...

  6. [转]bootstrap table 动态列数

    原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...

  7. bootstrap table 怎么实现前两列固定冻结?

    $("#Table").bootstrapTable('destroy').bootstrapTable({ pagination: true,//分页 minimumCountC ...

  8. BootStrap table使用

    bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...

  9. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

随机推荐

  1. Fat jar用途

    1.Fat jar用途 我们都知道默认的eclipse下打包jar时,是无法连同外部引用包一起打包的.所以一般我们可以自己编写MINIFEST.MF文件来手动将需要的jar包加入进来,但是这样对于引用 ...

  2. MySQL数据库索引之B+树

    一.B+树是什么 B+ 树是一种树型数据结构,通常用于数据库和操作系统的文件系统中.B+ 树的特点是能够保持数据稳定有序,其插入与修改操作拥有较稳定的对数时间复杂度.B+ 树元素自底向上插入,这与二叉 ...

  3. 表结构中updated_time设计为ON UPDATE CURRENT_TIMESTAMP时,使用过程的一个坑

    一.mysql表结构中存在如下设计时 表结构中updated_time设计为ON UPDATE CURRENT_TIMESTAMP时,如下 `updated_time` datetime NOT NU ...

  4. 关于JAVA项目中的常用的异常处理情况总结

    1. JAVA异常处理 在面向过程式的编程语言中,我们可以通过返回值来确定方法是否正常执行.比如在一个c语言编写的程序中,如果方法正确的执行则返回1.错误则返回0.在vb或delphi开发的应用程序中 ...

  5. Vmware安装Kali

    下载软件 破解版的Vmware14 kali(我的是kali-linux-2018.2-amd64) 配置虚拟机 新建虚拟机,选择自定义 虚拟机硬件兼容性 选择虚拟机硬件兼容性为Workstation ...

  6. vue.js如何实现点击按钮动态添加li

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. locust 学习中

    [转自]http://blog.51cto.com/youerning/2089930 前言 都说haproxy很牛x, 可是测试的结果实在是不算满意, 越测试越失望,无论是长连接还是并发, 但是测试 ...

  8. python记录_day07

    一.基本数据类型补充 1.列表的拼接用join()方法 li = ["hello","world"] s = "_".join(li) pr ...

  9. Python返回函数、闭包,匿名函数

    函数不仅可以作为函数参数,还可以作为函数返回结果 def pro1(c,f): def pro2(): return f(c) return pro2 #调用pro1函数时,返回的是pro2函数对象& ...

  10. [洛谷 P3239] [HNOI2015]亚瑟王

    [HNOI2015]亚瑟王 题目描述 小 K 不慎被 LL 邪教洗脑了,洗脑程度深到他甚至想要从亚瑟王邪教中脱坑.他决定,在脱坑之前,最后再来打一盘亚瑟王.既然是最后一战,就一定要打得漂亮.众所周知, ...