一篇带你了解如何使用纯前端类Excel表格构建现金流量表

一篇,了解,如何,使用,前端,excel,表格,构建,现金,流量表 · 浏览次数 : 11397

小编点评

**生成内容时需要带简单的排版** * 使用 `\n` 换行 * 使用 `\t` 制表 * 使用 `\b` 和 `\b` 排除匹配的字符 * 使用 `\r` 和 `\r` 排除匹配的字符 **排版示例** ``` sheet.setValue(10, 1, sheet.getValue(row, col)); sheet.setValue("\n", 1, sheet.getValue(row, col)); sheet.setValue("\t", 1, sheet.getValue(row, col)); sheet.setValue("\b", 1, sheet.getValue(row, col)); sheet.setValue("\r", 1, sheet.getValue(row, col)); ``` **排版结果** ``` 10 \n \t \b \r ```

正文

现金流量表(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))-SUM(FILTER(tblTransactions[Withdrawal],tblTransactions [日期]<$B$11))),0)
  2. 结束余额(起始余额 + 当前存款的总和 - 当前提款的总和):=IFERROR(D13+(SUM(FILTER(tblTransactions[Deposit],tblTransactions[Date]=$B$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/

与一篇带你了解如何使用纯前端类Excel表格构建现金流量表相似的内容:

一篇带你了解如何使用纯前端类Excel表格构建现金流量表

现金流量表(Cash Flow Statement),是指反映企业在一定会计期间现金和现金等价物流入和流出的报表。现金流量表是企业财务报表的三个基本报告之一(另外两个是资产负债表和损益表)。 为了全面系统地揭示企业一定时期的财务状况、经营成果和现金流量,财务报表需按财政部会计准则的标准格式设计,因此

Go-Zero定义API实战:探索API语法规范与最佳实践(五)

前言 上一篇文章带你实现了Go-Zero模板定制化,本文将继续分享如何使用GO-ZERO进行业务开发。 通过编写API层,我们能够对外进行接口的暴露,因此学习规范的API层编写姿势是很重要的。 通过本文的分享,你将能够学习到Go-Zero的API语法规范,以及学会实际上手使用。 概述 下文所说的是

Vue源码学习(一):数据劫持(对象类型)

好家伙,了解一下Vue如何实现数据劫持 1.Vue中data的使用 首先,我得搞清楚这玩意的概念,我们先从vue的使用开始吧 想想看,我们平时是如何使用vue的data部分的? 无非是这两种情况 (你可千万不要带着惊讶的表情说"啊!原来有两种写法的吗") //函数写法 data() { return

保护您的Web应用:使用雷池(SafeLine)WAF的入门指南

雷池(SafeLine)是长亭科技耗时近 10 年倾情打造的 WAF,核心检测能力由智能语义分析算法驱动。旨在提供卓越的安全保护。本文将带您一步步了解如何安装、配置和测试SafeLine,以及如何利用它保护您的Web应用程序。 一、在线安装雷池 在开始进行任何操作之前,需要确保你的系统符合以下最低配

一文带你搞清楚Python的多线程和多进程

本文分享自华为云社区《Python中的多线程与多进程编程大全【python指南】》,作者:柠檬味拥抱。 Python作为一种高级编程语言,提供了多种并发编程的方式,其中多线程与多进程是最常见的两种方式之一。在本文中,我们将探讨Python中多线程与多进程的概念、区别以及如何使用线程池与进程池来提高并

认识 CPU 底层原理(2)——逻辑门

本文为B站UP主硬件茶谈制作的系列科普《【硬件科普】带你认识CPU》系列的学习笔记,仅作个人学习记录使用,如有侵权,请联系博主删除 上一篇文章我们从最基本的粒子的角度认识了组成CPU的最基本单元MOSFET的原理。CPU作为计算机的核心硬件,其最主要的功能是进行运算,本章我们将会介绍CPU设计者是如

还不知道如何在java中终止一个线程?快来,一文给你揭秘

简介 工作中我们经常会用到线程,一般情况下我们让线程执行就完事了,那么你们有没有想过如何去终止一个正在运行的线程呢? 今天带大家一起来看看。 Thread.stop被禁用之谜 问道怎么终止一个线程,可能大多数人都知道可以调用Thread.stop方法。 但是这个方法从jdk1.2之后就不推荐使用了,

驱动开发:应用DeviceIoContro模板精讲

在笔者上一篇文章`《驱动开发:应用DeviceIoContro开发模板》`简单为大家介绍了如何使用`DeviceIoContro`模板快速创建一个驱动开发通信案例,但是该案例过于简单也无法独立加载运行,本章将继续延申这个知识点,通过封装一套标准通用模板来实现驱动通信中的常用传递方式,这其中包括了如何传递字符串,传递整数,传递数组,传递结构体等方法。可以说如果你能掌握本章模板精讲的内容基本上市面上的

5分钟教你搭建邮件服务器的实用指南

今天我写了一篇实用的文章,重点是教你如何免费搭建一个邮件服务器,这个服务器不仅可以用于发送邮件,还可以供我的待办机器人使用。一开始我试图找一些免费的 API 接口来实现这个功能,但遗憾的是,并没有找到合适的。对于程序员来说,能自己动手实现绝对是最好的选择,幸运的是,我有一台空闲的服务器可以利用。如果...

企业如何构建内部开发者门户?

在之前的文章中,我们了解了内部开发者门户的基本概念。内部开发者是一个自助应用程序和数据存储,是一个集中的枢纽,为开发及管理人员提供对各种工具、资源、文档和工作流程的访问。那么今天的文章将带你了解企业如何构建内部开发者门户。 为什么要构建内部开发者门户 随着软件系统变得越来越复杂和分布式,特别是采用基