探秘纯前端Excel表格：构建现金流量表的完整指南

news2024/11/29 1:56:07

最新技术资源（建议收藏）
https://www.grapecity.com.cn/resources/

现金流量表（Cash Flow Statement），是指反映企业在一定会计期间现金和现金等价物流入和流出的报表。现金流量表是企业财务报表的三个基本报告之一（另外两个是资产负债表和损益表）。
为了全面系统地揭示企业一定时期的财务状况、经营成果和现金流量，财务报表需按财政部会计准则的标准格式设计，因此，财务报表的典型特征是数据更新频繁、分析维度多、数据来源复杂，常规的报表工具很难同时满足上述所有需求
本博客将带大家了解如何使用类Excel 的 JavaScript 电子表格在前端创建现金流日历。此日历将广泛使用以下强大功能：

  1. 动态数组公式 - 根据一个公式将多个结果返回到一系列单元格。此示例使用 SEQUENCE 和 FILTER 函数。
  2. RANGEBLOCKSPARKLINE(template_range, data_expr) - 此迷你图允许开发人员将单元格范围模板 (template_range) 定义为单个单元格类型，并将该模板应用于单元格以将一组数据 (data_expr) 加载到模板中。该模板可以包括多行和/或多列。

最终效果如图所示：

点击此处下载完整示例。

要创建我们的现金流日历，我们需要创建如下所述的三张表：

  1. 数据源表
  2. 模板表
  3. 现金流日历：渲染表
数据源表

我们示例的数据源是交易列表。

我们创建了一个更动态的表格，当我们需要数据而不是单元格范围时，我们可以引用 Table1。

此表包含有关 TransactionID、交易类型、交易日期、公司名称、帐户名称、存款金额和取款的信息。

模板表

此页面包含我们将用来呈现现金流日历中发生的交易的模板范围。

此处的此单元格范围将用作包含现金流日历中所需信息的单元格的模板。

我们要做的第一件事是排列单元格，然后设置单元格的绑定路径。

它可以通过 Javascript 使用 SpreadJS setBindingPath 方法来完成。

templateSheet.setBindingPath(0, 1, "month");
templateSheet.setBindingPath(1, 2, "date");
templateSheet.setBindingPath(2, 2, "start");
templateSheet.setBindingPath(3, 2, "withdrawals");
templateSheet.setBindingPath(4, 2, "deposits");
templateSheet.setBindingPath(5, 2, "end");

当然，上边这步操作也有不用写代码的方法——用SpreadJS设计器，下载SpreadJS安装包，在下载的安装包中，从“\SpreadJS.Release.x.x.x\Designer\Designer Runtime”路径下找到设计器的安装包，完成安装后，按照下列步骤操作：

  1. 单击数据选项卡上的模板菜单 - 字段列表面板将出现在右侧
  2. 将鼠标悬停在 Start 分支上并通过单击绿色 + 按钮添加字段 *请注意，你可以使用“x”按钮删除字段并使用位于分支右侧的设置修改这些字段
  3. 拖动模板范围所需单元格中的字段

为了使现金短缺（期末余额为负）的日子可以用红色着色，期末余额为正的日子用绿色着色，中性的用黑色着色，我们可以使用条件格式。在设计器上可以这样操作：

  1. 在合并时选择日期单元格“A2:D2”
  2. 条件格式 → 新规则
  3. 通常，键入并选择使用公式来确定要格式化的单元格
  4. 输入你的公式，在我们的例子中 =‘Cell Template’!$C$6>0
  5. 单击格式→填充→选择绿色作为字体颜色
  6. 重复相同的步骤，但使用公式： =‘Cell Template’!$C$6<0 *请注意，对于余额为负的情况，颜色应设置为红色
现金流日历：渲染表

第 1 步：添加 MonthPicker 元素
我们日历的第一个元素是可变月份元素。要添加它，请使用 MonthPicker，这是 SpreadJS 中的一种下拉单元格样式。

JavaScript:
var monthPickerStyle = new GC.Spread.Sheets.Style();
monthPickerStyle.dropDowns = [
  {
	  type: GC.Spread.Sheets.DropDownType.monthPicker,
	  option: {
		  startYear: 2019,
		  stopYear: 2021,
		  height: 300,
	  }
  }
];
sheet.setStyle(2, 5, monthPickerStyle);

设计器：
选择单元格（在我们的例子中为 B2）

  1. 主页选项卡 → 单元格下拉菜单 → 月份选择器
  2. 在命令右侧，单击…
  3. 设置选取器的开始、结束年份和高度


然后，我们在进行计算时为包含月份的单元格指定一个名称。

  1. 在公式选项卡上，选择名称管理器
  2. 在弹出窗口中，单击新建按钮
  3. 设置单元格的名称。在我们的示例中：name: currentMonth
    参考：$D$2。你还可以添加评论并更改引用对象
第 2 步：创建现金流日历


使用 SEQUENCE(rows,columns,start,step) 函数来分配我们日历中的日期。这允许我们稍后在 CellClick 上检索单元格值。 B4 单元格的公式为：

=SEQUENCE(6,7,currentMonth-WEEKDAY(currentMonth)+1,1)

JavaScript:
cashflowSheet.setFormula(3, 1, '=SEQUENCE(6,7,currentMonth-WEEKDAY(currentMonth)+1,1)');

我们还没有为这些单元格使用格式化程序。

下一步是使用条件格式来使属于其他月份的日期成为可能，但所选日期为空白：

  1. 选择 B4:H9 然后选择日历的日期 → 条件格式
  2. 从下拉列表中选择新规则，然后选择“使用公式确定要格式化为规则类型的单元格”
  3. 输入你的公式，在我们的例子中为“=MONTH(B4)<>MONTH(currentMonth)” - 此格式仅适用于月份与下拉列表中选择的月份不同的单元格
  4. 单击格式
  5. 编号 → 自定义
  6. 输入”;;;”作为格式化程序将所有正确的单元格设为空白

下面的步骤包括使用 RANGEBLOCKSPARKLINE，它将 TemplateSheet 中的单元格范围用作单个单元格类型，并使用 OBJECT 函数将模板应用于代表我们现金流日历中日期的所有单元格中。

由于我们使用 SEQUENCE 为这些单元格设置值，因此我们将使用 RANGEBLOCKSPARKLINE 作为格式。

  1. 选择单元格区域 B4:H9
  2. 格式→更多数字格式→自定义
  3. 将格式化程序设置为：
=RANGEBLOCKSPARKLINE('Cell Template'!$A$2:$D$7,OBJECT("date",@,"start",IFERROR(SUM(FILTER(Table1[Deposit],Table1[Date]<@))-SUM(FILTER(Table1[Withdrawal],Table1[Date]<@)),0),"withdrawals",IFERROR(SUM(FILTER(Table1[Withdrawal],Table1[Date]=@)),0),"deposits",IFERROR(SUM(FILTER(Table1[Deposit],Table1[Date]=@)),0),"month",MONTH($A$2)))

作为第一个参数，它将单元格范围作为 TemplateSheet 中的模板。

作为第二个参数，它需要一个 OBJECT，该 OBJECT 从位于数据源表的 Table1 中获取数据。

  1. [日期]：单元格的当前值
  2. [开始]：之前所有存款的总和 - 之前所有提款的总和
  3. [提款]：当前提款的总和
  4. [存款]：当前存款的总和
  5. [end]:[start] + 所有当前存款的总和 - 所有当前提款的总和

使用公式是绑定并返回一个范围模板，以便更轻松地使用范围模板。

这是最终输出：

如上图所示，包含日历天数的单元格提供有关开始/结束余额、存款总额和提款总额的信息。

第 3 步：获取每日交易
如果我们想从 DataSource 页面中提取所有交易的列表，我们可以借助 SelectionChanged 事件。当这些事件发生时，SpreadJS 中的工作表将其事件绑定到特定操作。

在我们的示例中，当用户从日历中选择日期时，我们使用了这个方便的 SpreadJS 功能来提取所有交易的列表。

我们为包含所选日期、存款和取款的单元格指定一个名称，以便进行计算，此表格将包含所有交易数据。
为 currentMonth 创建名称范围的步骤是：

  1. 在公式选项卡上，选择名称管理器
  2. 在弹出窗口中，单击新建按钮
  3. 设置单元格的名称

在我们的示例中：

name:当前选择；refer to: ='Cash-Flow'!$B$11

name:当前存款；refer to: =FILTER(tblTransactions[Type]:tblTransactions[Withdrawal],(tblTransactions[Date]=CurrentSelection)*(tblTransactions[Deposit]>0))

name:当前取款；refer to: =FILTER(tblTransactions[Type]:tblTransactions[Withdrawal],(tblTransactions[Date]=CurrentSelection)*(tblTransactions[Withdrawal]>0))

设置不同的公式来获取所有存款列表、所有提款列表、结束和开始余额。

  1. 起始余额（之前所有存款的总和 - 之前所有取款的总和）：=IFERROR((SUM(FILTER(tblTransactions[Deposit],tblTransactions[Date]<$B 11 ) ) − S U M ( F I L T E R ( t b l T r a n s a c t i o n s [ W i t h d r a w a l ] , t b l T r a n s a c t i o n s [ 日期 ] < 11))-SUM(FILTER(tblTransactions[Withdrawal],tblTransactions [日期]< 11))−SUM(FILTER(tblTransactions[Withdrawal],tblTransactions[日期]<B$11))),0)
  2. 结束余额（起始余额 + 当前存款的总和 - 当前提款的总和）：=IFERROR(D13+(SUM(FILTER(tblTransactions[Deposit],tblTransactions[Date]=$B 11 ) ) − S U M ( F I L T E R ( t b l T r a n s a c t i o n s [ W i t h d r a w a l ] , t b l T r a n s a c t i o n s [ 日期 ] = 11))-SUM(FILTER(tblTransactions[Withdrawal] ,tblTransactions[日期]= 11))−SUM(FILTER(tblTransactions[Withdrawal],tblTransactions[日期]=B$11))),0)

其中 D13 是起始余额：

1. 存款：=IFERROR(FILTER(currentDeposits,{1,0,1,1,0}),"")
2. 取款：=IFERROR(FILTER(currentWithdrawals,{1,0,1,0,1}),"")


目前手动插入 currentSelection。要根据用户日期选择进行更改，请执行下一步。

在 JavaScript 中创建事件处理函数（见下文）：

// on day selection, update a cell used in filtering the data to show detailed transaction list
 cashflowSheet.bind(GC.Spread.Sheets.Events.SelectionChanged, function (sender, args) {
    const sheet = args.sheet;
    const row = args.newSelections[0].row;
    const col = args.newSelections[0].col;

    if ((row < 3 || row >= 3 + 6)
        || (col < 1 || col >= 1 + 7))
        return;
    // set the current date cell so that FILTER would update.
    sheet.setValue(10, 1, sheet.getValue(row, col));
});

一旦用户单击单元格，上面的代码就会检查单元格是否在日历边界内 (B4:H9)。否则，它会更新 currentSelection，因此，所有用于获取余额和有关交易信息的公式都会在它们指向更改的选定日期时给出正确的结果。

了解更多demo示例 :https://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html
移动端示例：http://demo.grapecity.com.cn/spreadjs/mobilesample/

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2206355.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

LeetCode.611有效三角形的个数

LeetCode.611有效三角形的个数

题目链接611. 有效三角形的个数 - 力扣&#xff08;LeetCode&#xff09; 1.常规解法&#xff08;会超时&#xff09; 由于构成三角形的条件为两边之和大于第三边&#xff0c;就可以遍历该数组&#xff0c;找到所有满足这个条件的三元组&#xff0c;代码如下&#xff1a; pub…
阅读更多...
【排序算法】快速排序、冒泡排序

【排序算法】快速排序、冒泡排序

文章目录 快速排序1.hoare版本&#xff08;左右指针法&#xff09;时间复杂度、空间复杂度分析优化——三数取中法2.挖坑法3.前后指针版本优化&#xff1a;小区间优化快速排序非递归代码——借助栈 冒泡排序时间复杂度 快速排序 1.hoare版本&#xff08;左右指针法&#xff09…
阅读更多...
生成式专题的第二节课--DCGAN

生成式专题的第二节课--DCGAN

一、DCGAN基础概念 DCGAN&#xff08;Deep Convolutional Generative Adversarial Network&#xff0c;即深度卷积生成对抗网络&#xff09;&#xff0c;于2016年提出&#xff0c;是一种深度学习模型&#xff0c;是生成对抗网络&#xff08;GAN&#xff09;的一种变体&#xf…
阅读更多...
国产 HDMI 发送芯片，兼容 HDMI1.4b 及 HDMI 1.4b 下的视频 3D 传输格式。

国产 HDMI 发送芯片，兼容 HDMI1.4b 及 HDMI 1.4b 下的视频 3D 传输格式。

最高分辨率高达 4K30Hz&#xff0c;最高采样率达到 300MHz.支持 YUV 和 RGB 之间的色彩空间转 换&#xff0c;数字接口支持 YUV 以及 RGB 格式输入的 IIS 接口以及 S/PDIF 接口支持高清音频的 传输&#xff0c;其中 S/PDIF 接口既可以兼容IEC61937 标准下的压缩音频传输&#x…
阅读更多...
图像增强——传统算法伽马校正实现暗光增强（附Python代码）

图像增强——传统算法伽马校正实现暗光增强（附Python代码）

&#x1f4aa; 专业从事且热爱图像处理&#xff0c;图像处理专栏更新如下&#x1f447;&#xff1a; &#x1f4dd;《图像去噪》 &#x1f4dd;《超分辨率重建》 &#x1f4dd;《语义分割》 &#x1f4dd;《风格迁移》 &#x1f4dd;《目标检测》 &#x1f4dd;《图像增强》 &a…
阅读更多...
OpenSearch迁移方案

OpenSearch迁移方案

一、背景 因业务需要迁移Opensearch 集群&#xff0c;当前集群数据量高达21TB&#xff0c;采用常规工具进行迁移估计不可取&#xff0c;需要使用对象存储做中转&#xff0c;进行OpenSearch数据迁移。 二、OpenSearch迁移方案 前期进行OpenSearch数据迁移调研 序号方案诠释备…
阅读更多...
java项目之科研工作量管理系统的设计与实现源码(springboot+vue+mysql)

java项目之科研工作量管理系统的设计与实现源码(springboot+vue+mysql)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的科研工作量管理系统的设计与实现。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 科研工作…
阅读更多...
介绍Java

介绍Java

Java简介 Java是一门由Sun公司&#xff08;现被Oracle收购&#xff09;在1995年开发的计算机编程语言&#xff0c;其主力开发人员是James Gosling&#xff0c;被称为Java之父。Java在被命名为“Java”之前&#xff0c;实际上叫做Oak&#xff0c;这个名字源于James Gosling望向…
阅读更多...
Basic Pentesting_ 2靶机渗透

Basic Pentesting_ 2靶机渗透

项目地址 plain https://download.vulnhub.com/basicpentesting/basic_pentesting_2.tar.gz 修改静态ip 开机按e 输入rw signie init/bin/bash ctrlx 进入编辑这个文件 vi /etc/network/interfaces修改网卡为ens33 保存退出 实验过程 开启靶机虚拟机 ![](https://img-bl…
阅读更多...
paimon，基础查询语句测试

paimon，基础查询语句测试

基础设置 -- 创建catalog/加载catalog&#xff0c;如果这个catalog已经存在就不会创建&#xff0c;自动加载元数据信息CREATE CATALOG fs_paimon_catalog WITH ( type paimon, warehouse hdfs://wsl01:8020/paimon/catalog ); -- 使用catalog use catalog fs_paimon_catalog…
阅读更多...
Java中二维数组-杨辉三角

Java中二维数组-杨辉三角

使用二维数组打印一个10行杨辉三角 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 1&#xff09;第一行有1个元素&#xff0c;第n行有n个元素 2&#xff09;每一行的第一个元素和最后一个元素都是1 3&#xff09;从第三行开始&#xff0c;对于非第一个元素和最后一个元素的元素…
阅读更多...
差分注意力，负注意力的引入

差分注意力，负注意力的引入

文章目录 Differential Transformer差分注意力&#xff0c;负注意力的引入相关链接介绍初始化函数多头差分注意力 Differential Transformer差分注意力&#xff0c;负注意力的引入 相关链接 ai-algorithms/README.md at main Jaykef/ai-algorithms (github.com) unilm/Diff…
阅读更多...
response和验证码、文件下载操作

response和验证码、文件下载操作

目录 Response对象 案例&#xff1a; 1、完成重定向 2、服务器输出字符输出流到浏览器 3、服务器输出字节输出流到浏览器 4、验证码 ServletContext对象 Response对象 功能&#xff1a;设置响应消息 1、设置响应行 格式&#xff1a;HTTP/1.1 200 ok 设置状态码 se…
阅读更多...
RabbitMQ 高级特性——死信队列

RabbitMQ 高级特性——死信队列

文章目录 前言死信队列什么是死信常见面试题死信队列的概念&#xff1a;死信的来源&#xff08;造成死信的原因有哪些&#xff09;死信队列的应用场景 前言 前面我们学习了为消息和队列设置 TTL 过期时间&#xff0c;这样可以保证消息的积压&#xff0c;那么对于这些过期了的消…
阅读更多...
【更新】上市公司企业机构投资者实地调研数据（2013-2023年）

【更新】上市公司企业机构投资者实地调研数据（2013-2023年）

一、测算方式&#xff1a; 参考《会计研究》逯东&#xff08;2019&#xff09;老师的做法&#xff0c;考虑投资者实地调研的频率和可能性&#xff0c;设立了下述变量来衡量上市公司接待投资者调研情况: 首先&#xff0c;使用年度范围内接待投资者调研的总次数 ( Visitnmb) 作为…
阅读更多...
卸载PLSQL及标准卸载流程

卸载PLSQL及标准卸载流程

目录 1. 卸载PLSQL2. 删除注册表3. 删除数据信息 1. 卸载PLSQL 等待进度条走完 2. 删除注册表 regedit 右击删除 3. 删除数据信息 由于AppData是隐藏文件&#xff0c;需要勾选隐藏的项目。 重启电脑&#xff0c;PLSQL就卸载成功了。
阅读更多...
低代码工单管理app评测，功能与效率解析

低代码工单管理app评测，功能与效率解析

预计到2030年&#xff0c;低代码平台市场将达1870亿美元。ZohoCreator助力企业构建定制化软件应用&#xff0c;以建筑行业工作订单管理app为例&#xff0c;简化流程&#xff0c;提升管理效率&#xff0c;降低成本。其用户友好界面、自动化管理、跨平台使用及全面报告功能受企业…
阅读更多...
项目优化内容及实战

项目优化内容及实战

文章目录 事前思考Prometheus 普罗米修斯概述架构安装及使用 Grafana可视化数据库读写分离实战1-PrometheusGrafanaspringboot 事前思考 需要了解清楚&#xff1a;需要从哪些角度去分析实现&#xff1f;使用了缓存&#xff0c;就需要把缓存命中率数据进行收集&#xff1b;使用…
阅读更多...
企业在隔离网环境下如何进行安全又稳定的跨网文件交换？

企业在隔离网环境下如何进行安全又稳定的跨网文件交换？

在数字化时代&#xff0c;企业的数据流通如同血液一般重要。然而&#xff0c;当企业内部实施了隔离网环境&#xff0c;跨网文件交换就成了一个棘手的问题。今天我们将探讨在隔离网环境下&#xff0c;企业面临的跨网文件交换挑战&#xff0c;以及如何通过合规的跨网文件交换系统…
阅读更多...
数字电路——触发器1（RS和钟控触发器）

数字电路——触发器1（RS和钟控触发器）

触发器&#xff1a;能够存储一位二进制信息的基本单元电路称触发器(Flip-Flop) 特点&#xff1a; 具有两个能自行保持的稳定状态&#xff0c;用来表示逻辑状态的“0”或“1”。具有一对互补输出。有一组控制(激励、驱动)输入。或许有定时(时钟)端CP(Clock Pulse)。在输入信号…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023