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 ,遇到不少 ...
随机推荐
- jquery ----> How to Create a Basic Plugin (翻译)
http://learn.jquery.com/plugins/basic-plugin-creation/ 如何创建一个基本的插件 有时候你想在整个代码中提供一些功能. 例如,也许你想要一个单一的方 ...
- 部署--云服务器(RubyChina上的转帖); 附加用cap部署sidekiq
https://ruby-china.org/topics/36899 附加https://ruby-china.org/topics/36899 Capistrano + Rails5.2部署 使用 ...
- 在linux中要直接查找的命令
- php字符串转成数组
/* 4.$m = “woxihuanphp”,编程实现:将字符串分割为单个字符存放到一个数组中,并打印数组? */ $m='woxihuanphp'; echo $res=trim(chunk_sp ...
- vm15安装MACOS
VMWare15 安装 Mac OS 系统文章目录VMWare15 安装 Mac OS 系统安装环境工具准备准备工作MAC虚拟机设置启动MAC前准备工作安装系统安装VMware Tool注意事项参考链 ...
- array_multisort以及php中的排序函数
1. array_multisort(array_column($arr, $key), SORT_DESC, $arr); // 根据二维数组中的某一列对数组进行增序或者降序排列 什么是关联数组呢? ...
- HDU-2586-裸LCA入门-tarjan离线
http://acm.hdu.edu.cn/showproblem.php?pid=2586 给出一颗树和边权,询问两点距离. 考虑tarjan离线做法,做法很巧妙,当前进行到u,对他的儿子v,当v子 ...
- 【LeetCode】Permutation全排列
1. Next Permutation 实现C++的std::next_permutation函数,重新排列范围内的元素,返回按照 字典序 排列的下一个值较大的组合.若其已经是最大排列,则返回最小排列 ...
- UltraEdit取消自动备份(.bak)
UltraEdit是美国IDM Computer Solutions公司1994年开始开发的文本编缉器,语法高量.自动缩进和编码识别与兼容等编缉器痛点都做得很好. 自动备份能够很好地确实文件误操作后的 ...
- Java 8 默认方法(Default Methods)
Java 8 默认方法(Default Methods) Posted by Ebn Zhang on December 20, 2015 Java 8 引入了新的语言特性——默认方法(Default ...