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.递归的要点是在遍历子节点的时候,先去遍历子节点的子节点,直到没有子节点了,才开始一级一级累加金额。
"他们都在看烟花,无人想起你。"
javascript树形汇总金额的更多相关文章
- Web应用程序开发,基于Ajax技术的JavaScript树形控件
感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用, ...
- Javascript知识点汇总-初级篇
JavaScript的数据类型都有什么? 基本数据类型:String,Boolean,Number,Undefined, Null 引用数据类型:Object(Array,Date,RegExp,Fu ...
- 使用 JavaScript 根据消费金额和消费者是否为会员确定折扣,最终核算实际应该支付的金额
查看本章节 查看作业目录 需求说明: 根据消费金额和消费者是否为会员确定折扣,最终核算实际应该支付的金额 消费金额在 200 元以上的会员折扣是 7.5 折,消费金额没有达到 200 元的会员折扣是 ...
- JavaScript学习汇总
对于JavaScript,还是无法割舍,有心无力,时间总是匆匆,暂且都放在这里吧 javascript中this的使用 写的很不错的一偏文章,简单看了下,mark了吧 原文:http://davids ...
- javascript树形菜单简单实例
参考博客地址:http://chengyoyo2006.blog.163.com/blog/static/8451734820087843950604/ <!DOCTYPE HTML PUBLI ...
- javascript算法汇总(持续更新中)
1. 线性查找 <!doctype html> <html lang="en"> <head> <meta charset="U ...
- JavaScript将小写金额转换成大写
//num为小写金额,单位元 changeMoney(num) { if(isNaN(num))return ""; var strPrefix=""; if( ...
- JavaScript操作符汇总
操作符 JavaScript 有赋值.比较.算术.位.逻辑.字符串和特殊运算符.本章描述了操作符,以及关于操作符优先级的一些信息. 表 2.1 JavaScript 所有操作符简明列表. 表 2.1 ...
- JavaScript -- 知识点汇总
js语法 1. javascript数据类型 JavaScript拥有动态类型.这意味着相同的变量可用作不同的类型:有 字符串,数字, 布尔值, 对象, 数组,Undefined和Null 对象: v ...
随机推荐
- nginx支持wss配置
nginx证书 nginx.conf配置
- mvc 学习笔记
1.routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); MVC中的路由忽略,只要访问的地址中带有 .axd , 该请求都将排除在mv ...
- 音视频入门-14-JPEG文件格式详解
* 音视频入门文章目录 * JPEG 文件格式解析 JPEG 文件使用的数据存储方式有多种.最常用的格式称为 JPEG 文件交换格式(JPEG File Interchange Format,JFIF ...
- 删除节点(removeChild())
remoceChild():方法将从一个给定元素里删除一个子节点: reference = element.removeChild(node); 这个方法的返回值是一个指向已经被删除的子节点的引用指针 ...
- ASP.NET Core 2 preview 1中Program.cs,Startup.cs和CreateDefaultBuilder的探索
Exploring Program.cs, Startup.cs and CreateDefaultBuilder in ASP.NET Core 2 preview 1 ASP.NET Core 2 ...
- VisualStudio2012编辑器错误
https://blogs.msdn.microsoft.com/webdev/2014/11/11/dialog-box-may-be-displayed-to-users-when-opening ...
- Spring Data JPA 条件查询的关键字
Spring Data JPA 为此提供了一些表达条件查询的关键字,大致如下: And --- 等价于 SQL 中的 and 关键字,比如 findByUsernameAndPassword(Stri ...
- PHP按二维数组中的某个值重新排序数组 usort的使用方法
$arr[0] = ['aa'=>123,'bb'=>'abc']; $arr[1] = ['aa'=>456,'bb'=>'dfe']; usort($arr,ss('aa' ...
- nginx、redis在Centos7中,加入开机自启动
nginx加入开机启动 cat <<EOF >> /etc/systemd/system/nginx.service> [Unit]> Description=ng ...
- [转载]C++中四种强制类型转换方式
C++中四种强制类型转换方式 原文地址:http://www.cnblogs.com/home123/p/6763967.html 类型转换有c风格的,当然还有c++风格的.c风格的转换的格式很简单( ...