<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. LeetCode--414--第三大的数

    问题描述: 给定一个非空数组,返回此数组中第三大的数.如果不存在,则返回数组中最大的数.要求算法时间复杂度必须是O(n). 示例 1: 输入: [3, 2, 1] 输出: 1 解释: 第三大的数是 1 ...

  2. php 商场收银收费系统,使用的策略模式

    <?php//策略模式就是你有很多的方法,选择一种适合自己的,// 单例模式就是只有一个实例对象,不需要每个文件都要加载,比如连接数据库,// 工厂模式就是 //策略模式 优惠系统.工资计算系统 ...

  3. 深入解析 composer 的自动加载原理 (转)

    深入解析 composer 的自动加载原理 转自:https://segmentfault.com/a/1190000014948542 前言 PHP 自5.3的版本之后,已经重焕新生,命名空间.性状 ...

  4. MySQL事务(二)

    一.事务的隔离级别/锁问题 基本的介绍: 当我们的mysql表,被多个线程或者客户端同时操作时,mysql提供一种机制,可以让不同的事务在操作数据时,具有隔离性. 锁是计算机协调多个进程或线程并发访问 ...

  5. Music in Car CodeForces - 746F (贪心,模拟)

    大意: n首歌, 第$i$首歌时间$t_i$, 播放完获得贡献$a_i$, 最多播放k分钟, 可以任选一首歌开始按顺序播放, 最多选w首歌半曲播放(花费时间上取整), 求贡献最大值. 挺简单的一个题, ...

  6. 2-SET 前缀优化建图

    1, Duff in Mafia CodeForces - 587D 2, Ants CodeForces - 1007D

  7. laravel的重定向

    Route::get("redirect1", function () { // redirct的三种写法 // return redirect()->route(" ...

  8. ERROR: java.lang.NullPointerException的一种情况

    java.lang.NullPointerException错误,错误原因就是以下六条没配置完: 1.JAVA环境配置正确.2.源码里面的包没有与tomcat的包冲突.3.把数据库文件给导入到了SQL ...

  9. prometheus远程连接m3db实现存储

    如果是prometheus server配置文件添加如下: remote_read: - url: "http://m3coordinator.m3db.svc.cluster.local: ...

  10. Cassandra的commitLog、memtable、 SStable

    和关系数据库一样,Cassandra在写数据之前,也需要先记录日志,称之为commitlog,然后数据才会写入到Column Family对应的Memtable中,并且Memtable中的内容是按照k ...