javascript树形汇总金额

在开发企业应用的时候总会遇到树形汇总金额的场景,即将树形的列表中的叶子节点(没有子节点)的金额汇总到父节点上。

这种需求一般是在前端进行处理,即使用JavaScript处理,因为叶子节点的金额可能是不断改变的,每回变动都请求后台显然不现实。

场景与实现

假设有一个主从表的场景。第一点,从表是一个树形的列表,只有叶子节点能填写金额,父节点都汇总其下叶子节点的金额。第二点,主表有一个金额字段,取值汇总自汇总从表中所有根节点(顶级父节点)的金额。

先编写一个遍历从表中所有根节点的方法。

function sumMoney2Main(items) {
  let sumMoney = 0;
  for (let item of items) {
    this.sumMoneyToItsParent(item);
    sumMoney += item.money || 0;
  }
  return sumMoney;
}

然后编写一个递归汇总子节点金额的方法。

function sumMoneyToItsParent(item) {
  let sumMoney = 0;
  if (item.children && item.children.length) {
    for (let childItem of item.children) {
      sumMoneyToItsParent(childItem);
      sumMoney += childItem.money || 0;
    }
    item.money = sumMoney;
  }
}

这样就完成了树形汇总金额的需求。

简单分析

这里主要有几个要点。

1.在JavaScript中,数组中的对象都是保存在堆内存中的,栈内存中的变量只是保存的对这些对象的引用,因此在上面的代码中,无论将数组中的对象的引用赋予给多少个变量并做改动,实际上都是对数组中对象的改动,这是最基础的。这一特性被称为浅拷贝。

2.递归的要点是在遍历子节点的时候,先去遍历子节点的子节点,直到没有子节点了,才开始一级一级累加金额。

"他们都在看烟花,无人想起你。"

原文地址:https://www.cnblogs.com/yanggb/p/11764858.html

时间: 2024-11-13 01:22:52

javascript树形汇总金额的相关文章

Web应用程序开发,基于Ajax技术的JavaScript树形控件

感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用,它用来在Html页面上展现具有层次结构的数据项. 目前市场上常见的JavaScript框架及组件库中均包含自己的树形控件,例如jQuery.Dojo.YUI.Ext JS等,还有一些独立的树形控件,例如dhtmlxTree等,这些树形控件完美的解决了层次数据的展示问题. 展示离不开数据,树形控件主要

javascript 树形菜单

1. [代码][JavaScript]代码     var ME={ini:{i:true,d:{},d1:{},h:0,h1:0,h2:0},html:function(da,f){var s='<ul'+(f?' class="f"':'')+'>';for(var i=0,l=da.length;i<l;i++){if(typeof(da[i].pid)=='object'){s+='<li><button type="button&

Oracle树形汇总--connect_by_root

有个需求:统计上级部门的销售额,制造数据如下: drop table dept; create table dept ( DEPTNO number, DEPTNAME varchar2(50), PARENT_DEPTNO number ); insert into dept values(1,'市场部',-1); insert into dept values(2,'市场一部',1); insert into dept values(3,'市场二部',1); insert into dept

JavaScript要点汇总——The Most Important

关于JavaScript的基础变量,运算符的详解以及基本的分支循环嵌套已经在 JS基础变量及JS中的运算符 JS中的循环分支嵌套 说过了,今天我们所说的是做网页中最长用到的东西.内容不算少,要有耐心,慢慢看 1.函数的声明及调用: 函数的声明及调用: 使用函数前要先定义才能调用 1.函数定义有三个部分:函数名,参数列表,函数体 定义函数的格式 function 函数名(参数1,参数2,.......){ 函数执行部分: return 表达式: } 函数调用的格式:直接调用:函数名(参数一的值,参

JavaScript -- 知识点汇总

js语法 1. javascript数据类型 JavaScript拥有动态类型.这意味着相同的变量可用作不同的类型:有 字符串,数字, 布尔值, 对象, 数组,Undefined和Null 对象: var person={ firstname : "John", lastname : "Doe", id : 5566 };对象属性有两种寻址方式:name = person.lastname;name = person["lastname"]; U

JavaScript简短汇总1

JavaScript——脚本语言 宿主文件 NetScape  JSscript  JS 一.JavaScript基本语法. (一)数据类型与变量类型. 数据类型:整数,小数,布局,字符串,日期时间,数组 变量类型:var 强制转换: parseInt() parseFloat()   isNaN() parseint()用法    转换输入字符串,变为int型.首字母不为数字,结果输出nan(not a number): 中间出现不为数字的字符,该字符后的内容将不被解析,只显示前面内容:   

关于javascript运算符汇总

javascript运算符有:算术运算符.赋值运算符.比较运算符.逻辑运算符.条件运算符.位运算符.还有其它运算符等等. 算术运算符包括:+(加).-(减).*(乘)./(除).%(余).++(累加).--(递减) 赋值运算符包括:=.+=.-=.*=./=.%= 比较运算符包括:=(等于).==(全等于).!=(不等于).>(大于).<(小于).>=(大于或等于).<=(小于等于) 逻辑运算符包括:&&(and).||(or).!(not) 条件运算符包括:用?表

Javascript 基础汇总

1 javascript字符串 属性:.length  计算字符串长度 转义字符 \     \n 换行 \r 回车 2 字符串方法

JavaScript操作符汇总

操作符 JavaScript 有赋值.比较.算术.位.逻辑.字符串和特殊运算符.本章描述了操作符,以及关于操作符优先级的一些信息. 表 2.1 JavaScript 所有操作符简明列表. 表 2.1 JavaScript 操作符 操作符分类 操作符 描述 算术操作符 + (加法) 将两个数相加. ++ (自增) 将表示数值的变量加一(可以返回新值或旧值). - (求相反数,减法) 作为求相反数操作符时返回参数的相反数.作为二进制操作符时,将两个数相减. -- (自减) 将表示数值的变量减一(可以