页面上表格金额统计汇总
页面结构：
<!-- 核销退房结算 -->
<div id="div-checkout-id" class="row cl">
<label class="form-label col-sm-1"><span class="c-red">退房结算</span></label>
<div class="formControls col-sm-3">
<a id="checkout_query_sel" class="btn btn-primary radius ml-20 mr-20">关联退房结算</a>
<input type="hidden" value="${entity.checkoutId}" id="checkoutId" name="checkoutId">
<input type="hidden" value="${entity.checkoutInfo?html}" id="checkoutInfo" name="checkoutInfo">
<input type="hidden" value="${entity.colAndPayInfo?html}" id="colAndPayInfo" name="colAndPayInfo">
<table class="table table-border table-bordered table-bg table-sort" id="table-list-detail-checkout" style="width:600px;">
<thead>
<tr>
<th width="20%">类型</th>
<th width="20%">金额</th>
<th width="40%">备注</th>
<th width="20%">操作</th>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
<div id="btn-sum"></div>
</div>
</div>
var total=0;
$(function() {
reloadCheckoutSummay();
});
function reloadCheckoutSummay() {
if (!$('#checkout-detail-hidden-pid').val()) {
return;
}
$.getJSON('/checkOutSettlement/findOne', {
id : $('#checkout-detail-hidden-pid').val()
}, function(resp) {
var ret = [];
ret.push({
'chargeType' : '水费',
'total' : resp.payFee1 ,
'amt' : 0
});
ret.push({
'chargeType' : '电费',
'total' : resp.payFee2 ,
'amt' : 0
});
ret.push({
'chargeType' : '煤气费',
'total' : resp.payFee3 ,
'amt' : 0
});
ret.push({
'chargeType' : '数字电视费',
'total' : resp.telephoneFee ,
'amt' : 0
});
ret.push({
'chargeType' : '管理费',
'total' : resp.managerPrice ,
'amt' : 0
});
ret.push({
'chargeType' : '卫生费',
'total' : resp.healthCosts ,
'amt' : 0
});
ret.push({
'chargeType' : '损坏维修费',
'total' : resp.damageRepairCosts ,
'amt' : 0
});
ret.push({
'chargeType' : '租金滞纳金',
'total' : resp.fines ,
'amt' : 0
});
ret.push({
'chargeType' : '需补租金',
'total' : resp.payFees ,
'amt' : 0
});
ret.push({
'chargeType' : '转租费',
'total' : resp.notPayFee ,
'amt' : 0
});
ret.push({
'chargeType' : '其他',
'total' : resp.otherFee ,
'amt' : 0
});
var arrToShow = [];
$.getJSON('/checkOutSettlement/findSummaryByPid', {
pid : $('#checkout-detail-hidden-pid').val()
}, function(res) {
$('#checkout-detail-tab > tbody > tr').remove();
$.each(res, function(i, item) {
$.each(ret, function(j, tmp) {
if (item.chargeType == tmp.chargeType) {
tmp.amt = item.amt;
}
});
});
$.each(ret, function(j, item) {
$('#checkout-detail-tab > tbody').append('<tr>' + '<td>' + item.chargeType + '</td>'
+ '<td class="c-red">' + item.amt + '</td>'
+ '<td> <a href="javascript:void(0);" οnclick="reloadCheckoutDetails(this);">加载</a> </td>'
+ '<td class="c-blue">' + (item.total - item.amt) + '</td><td>'
+ '<a href="javascript:void(0);" οnclick="addRelationCheckout(this);">关联</a>' + '</td>'
+ '</tr>');
})
});
});
}
function addRelationCheckout(href) {
var curTd = $(href).parent();
var chargeType = curTd.prev().prev().prev().prev().html();
var amt = curTd.prev().html();
if (!$('#table-list-detail-checkout')) {
return;
}
str = '<tr><td>' + '<input type="text" class="input-text" name="checkout_chargeType" value="' + chargeType + '" />' + '</td><td>'
+ '<input type="text" class="input-text amt" name="checkout_amt" value="' + amt + '" />' + '</td><td>'
+ '<input type="text" class="input-text" name="checkout_note" value="" />' + '</td><td>'
+ '<a style="text-decoration:none;" onClick="deleteItem(this)" href="javascript:;" title="删除"><i class="Hui-iconfont"></i></a>'
+ '</td></tr>';
total=(Number(total)+Number(amt)).toFixed(2);
$('#table-list-detail-checkout > tbody').append(str);
$('#btn-sum').html('                             '+
'<span class="c-red">合计：'+total+'</span>');
}
function reloadCheckoutDetails(href) {
var curTd = $(href).parent();
var chargeType = curTd.prev().prev().html();
$.getJSON('/checkOutSettlement/findByPidAndChargeType', {
pid : $('#checkout-detail-hidden-pid').val(),
chargeType : chargeType
}, function(res) {
var html = '详情:';
$.each(res, function(i, item) {
html += '<br/>'
+ String
.format(
'<span class="c-blue mr-10 ml-10">时间:</span> {0} , <span class="c-blue mr-10 ml-10">金额:</span> {1} , <span class="c-blue mr-10 ml-10">备注:</span> {2}',
item.createDate, item.amt, item.note);
});
curTd.html(html);
});
}
function calCheckoutBal() { // 计算
if (!$('#id_payFee1')) {
return {};
}
var ret = {};
ret['水费'] = $('#id_payFee1').val() | 0;
ret['电费'] = $('#id_payFee2').val() | 0;
ret['煤气费'] = $('#id_payFee3').val() | 0;
ret['数字电视费'] = $('#id_telephoneFee').val() | 0;
ret['管理费'] = $('#id_managerPrice').val() | 0;
ret['卫生费'] = $('#id_healthCosts').val() | 0;
ret['损坏维修费'] = $('#id_damageRepairCosts').val() | 0;
ret['租金滞纳金'] = $('#id_fines').val() | 0;
ret['需补租金'] = $('#id_payFees').val() | 0;
ret['转租费'] = $('#id_notPayFee').val() | 0;
ret['其他'] = $('#id_otherFee').val() | 0;
return ret;
}
function deleteItem(href){
var amt=$(href).parent().parent().find(".amt").val();
console.log(amt);
total=(Number(total)-Number(amt)).toFixed(2);
$('#btn-sum').html('                             '+
'<span class="c-red">合计：'+total+'</span>');
$(href).parent().parent().remove();
}
页面上表格金额统计汇总相关推荐
- java web统计报表_用Java在Web页面上输出统计图 统计报表
用Java在Web页面上输出统计图 河南省焦作水利局 聂春生 在Internet 和Intranet 的应用中,数据库和Web 技术的结合是传统MIS 系统移植到Internet(Intrant) 环 ...
- 【SQL】— 面试SQL，订单金额统计
面试题中的一道sql题,比较考察对sql函数的掌握程度,记录一下,方便学习. 需求: 一张客户表 tb_cust 如下: CUST_ID varchar(30) 客户编号(primary key) C ...
- 在页面上根据数据，动态创建表格
在页面上根据数据,动态创建表格 var arr = [ { name: 'Jack', age: 18, gender: '男' },{ name: 'Rose', age: 20, gender: ...
- html页面 复制表格,网页上表格复制到ECEL只能选HTML格式
好文网为大家准备了关于网页上表格复制到ECEL只能选HTML格式范文,好文网里面收集了五十多篇关于好网页上表格复制到ECEL只能选HTML格式好文,希望可以帮助大家.更多关于网页上表格复制到ECEL只 ...
- easyexcel复杂模板导出（合并行列，列统计汇总）
easyexcel复杂模板导出(合并行列,统计汇总) 为什么使用easyexcel 1. easyexcel可以通过模板导出(符合项目使用习惯) 2. easyexcel支持大数据量导出,性能较好(满 ...
- 计算机表格数据怎么样汇总,excel中如何将不同表格中的统一数据汇总求和《》...
怎么让EXCEL表格多个单元格里的数值相加求和? 有两种方法, 第一种:如果多个单元格的数量多,你可以用sum求和进行,在格式工具有一个"∑"自动求和的符号,选择sum自动求和这个 ...
- 接到一个需求，想在页面上加一个链接有多难？
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | 程序师 来源 | www.techug.com ...
- linux访问网页元素,Linux_DOM和JAVASCRIPT访问页面上的元素，访问方法：getElementById() - phpStudy...
DOM和JAVASCRIPT访问页面上的元素 访问方法: getElementById():返回拥用传递给该方法的指定id的第一个对象的引用. getElementsByName():返回拥用传递该方 ...
- html单页面显示多个文章,从单个html页面上的多个django应用模型获取数据
我有一个名为Project_Name的项目和一个名为first_app的应用程序,其中包含一些文章. 我在我的主页上显示这些文章标题作为应用页面上文章的链接.从单个html页面上的多个django应用 ...
最新文章
- Java设计模式(二十)：中介者设计模式
- smem – Linux 内存监视软件
- 前端学习（2591）：刷新页面vuex消失
- ApiBoot - ApiBoot Quartz 使用文档
- Prime算法生成迷宫
- 关于ubuntu自定义service服务时找不到/usr/lib/systemd/system目录的问题
- 判断Logger级别是否开启的方法
- activity多实例任务减签
- ASP.NET页面——页面事件
- NEON码农指导 Chapter 3 : NEON Instruction Set Architecture
- 金融大数据风控建模实战（一）智能风控背景
- 使用超级鹰登录12306网站
- 怎么学计算机中级,计算机二级自学要多久 怎样复习
- 后ERP时代Oracle EBS的机遇与挑战，云和奥创沉心钻研十年谈
- gif动图怎么制作？分享三个好用的方法
- 网卡驱动：传输超时watchdog_timeo/ndo_tx_timeout
- vue实现简单瀑布流布局(vue-waterfall2)
- 阿里巴巴java规范
- ahocorasick库的简单使用
- miniGUI-4.0.2 交叉编译