页面上表格金额统计汇总

news/2024/7/6 2:17:44

页面结构:

<!-- 核销退房结算 -->
        <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">&#xe631;</i></a>'  
       + '</td></tr>';
  total=(Number(total)+Number(amt)).toFixed(2);
  $('#table-list-detail-checkout > tbody').append(str);
  $('#btn-sum').html('&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp'+
          '<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('&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp'+
            '<span class="c-red">合计:'+total+'</span>');
    $(href).parent().parent().remove();
}

 


http://lihuaxi.xjx100.cn/news/244561.html

相关文章

Windows 消息循环(1) - 概览

本文从消息循环是如何驱动程序的这个角度&#xff0c;对 Windows 消息循环进行概览性介绍。 使用 EN5 课件获得更好的阅读体验&#xff1a; 【希沃白板5】课件分享 : 《Windows培训 - 消息循环》https://r302.cc/q2d1jB 点击链接直接预览课件 1 程序是怎么跑起来的&#xff1f;…

PostgreSQL 批量权限 管理方法

关于PostgreSQL的逻辑架构和权限体系&#xff0c;可以参考 https://yq.aliyun.com/articles/41210 本文将给大家介绍一下如何批量管理表&#xff0c;视图&#xff0c;物化视图的权限。 以及如何管理默认权限&#xff0c;批量赋予schema的权限。 对整个schema的对象进行权限管理…

sublime text3 前端插件介绍

Emmet插件 Emmet插件可以说是使用Sublime Text进行前端开发必不可少的插件 它让编写HTML代码变得极其简单高效 基本用法&#xff1a;输入标签简写形式&#xff0c;然后按Tab键 关于Emmet的更多介绍&#xff0c;请查看官方文档 这份速查表&#xff0c;可以帮你快速记忆简写形式 …

在SpringBoot中使用SpringDataRedis

SpringDataRedis应用&#xff1a; 说明&#xff1a; 关于Redis:一个基于键值对存储的NoSQL内存数据库&#xff0c;可存储复杂的数据结构&#xff0c;如List, Set, Hashes。 关于Spring Data Redis:简称SDR, 能让Spring应用更加方便配置和访问Redis。 1.在pom.xml加入以下依赖 &…

理解RESTful架构

越来越多的人开始意识到&#xff0c;网站即软件&#xff0c;而且是一种新型的软件。 这种"互联网软件"采用客户端/服务器模式&#xff0c;建立在分布式体系上&#xff0c;通过互联网通信&#xff0c;具有高延时&#xff08;high latency&#xff09;、高并发等特点。…

JavaScript 复习之数据类型

一、简介 JavaScript 的数据类型有 7 种&#xff1a; 数值&#xff08;number&#xff09;字符串&#xff08;string&#xff09;布尔值&#xff08;boolean&#xff09;undefinednull对象&#xff08;object&#xff09;Symbol&#xff08;ES6 中新增的类型&#xff0c;表示独…

SpringRestTemplate用法详解

REST&#xff08;RepresentationalState Transfer&#xff09;是Roy Fielding 提出的一个描述互联系统架构风格的名词。REST定义了一组体系架构原则&#xff0c;您可以根据这些原则设计以系统资源为中心的Web 服务&#xff0c;包括使用不同语言编写的客户端如何通过 HTTP处理和…

PostgreSQL运维实战精讲之“postgresql源码安装”

一、下载地址wget https://ftp.postgresql.org/pub/source/v9.2.4/postgresql-9.2.4.tar.gz二、安装&#xff1a;#安装依赖包yuminstall -y perl-ExtUtils-Embed readline-devel zlib-devel pam-devellibxml2-devel libxslt-devel openldap-devel python-devel gcc-c openssl…