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 ,遇到不少 ...
随机推荐
- 20165327《Java程序设计》实验一 Java开发环境的熟悉 实验报告
20165327<Java程序设计>实验二 <Java面向对象程序设计>实验报告 实验二 <Java面向对象程序设计> 一.实验报告封面 课程:Java程序设计 班 ...
- SSH登录服务器修改VNC的问题
远程登陆服务器直接用 ssh hostname@ip_address 即可登陆.hostname就是自己的用户名,ip_address就是IP地址. 关于VNC使用的命令: 杀死VNC: vncser ...
- 2-sat学习笔记
前后缀建图 例:要求n个变量满足至多有1个为true. 暴力:一个点的true向其它n-1个点的false连边,复杂度O(n^2). 正解:prei表示前i个点是否有真. prei的true向prei ...
- 整体二分求动态区间第k大
比树状数组套主席树不知道高到哪里去了,solve(l,r,L,R)就是对于L,R的操作区间的答案都在l,r区间里,然后递归下去 复杂度O(nlognlogn),每个操作会执行logn次就是o(nlog ...
- hdu5992 kdt
题意:n个旅馆,每个有花费,m个查询,查询在某个点在c花费范围内的距离最小的旅馆 题解:kdt,建成四维,坐标两维,花费一维,id一维,实际上建树只用前两维,正常的查询,如果满足条件在更新答案即可 / ...
- 【基础知识】【1】CDN
正文: CDN:Content Delivery Network,内容分发网络.使用户访问离ta最近的资源服务器,优化访问速度 优点: 1,内容可以共享,不同站点的同一文件可以不用多次缓存 2,增加下 ...
- seaweedFS
那首先我们来分析一下seaweedfs是什么?seaweedfs是一个非常优秀的由 golang 开发的分布式存储开源项目.它是用来存储文件的系统,并且与使用的语言无关,使得文件储存在云端变得非常方便 ...
- 用一个开发案例详解Oracle临时表
用一个开发案例详解Oracle临时表 2016-11-14 bisal ITPUB  一.开发需求 最近有一个开发需求,大致需要先使用主表,或主表和几张子表关联查询出ID(主键)及一些主表字段 ...
- 鼠标放上改变Button的大小
private void enterBtn_MouseLeave(object sender, MouseEventArgs e) { enterBtn.Wi ...
- vmplayer桥接以及nat配置nginx
1.环境 centos6.4 vm player nginx1.8 2.虚拟机的防火墙 参考http://blog.csdn.net/qilovehua/article/details/4550713 ...