<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="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>
方式二效果展示: