一篇带你了解如何使用纯前端类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),是指反映企业在一定会计期间现金和现金等价物流入和流出的报表。现金流量表是企业财务报表的三个基本报告之一(另外两个是资产负债表和损益表)。 为了全面系统地揭示企业一定时期的财务状况、经营成果和现金流量,财务报表需按财政部会计准则的标准格式设计,因此

python进阶:带你学习实时目标跟踪

摘要:本程序主要实现了python的opencv人工智能视觉模块的目标跟踪功能。 本文分享自华为云社区《python进阶——人工智能实时目标跟踪,这一篇就够用了!》,作者:lqj_本人 。 前言 本程序主要实现了python的opencv人工智能视觉模块的目标跟踪功能。 项目介绍 区域性锁定目标实时

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

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

【.NET8】访问私有成员新姿势UnsafeAccessor(上)

前言 前几天在.NET性能优化群里面,有群友聊到了.NET8新增的一个特性,这个类叫UnsafeAccessor,有很多群友都不知道这个特性是干嘛的,所以我就想写一篇文章来带大家了解一下这个特性。 其实在很早之前我就有关注到这个特殊的特性,但是当时.NET8还没有正式发布,所以我也没有写文章,现在.

MongoDB从入门到实战之Docker快速安装MongoDB

前言 在上一篇文章中带领带同学们快速入门MongoDB这个文档型的NoSQL数据库,让大家快速的了解了MongoDB的基本概念。这一章开始我们就开始实战篇教程,为了快速把MongoDB使用起来我将会把MongoDB在Docker容器中安装起来作为开发环境使用。然后我这边MongoDB的可视化工具用的

[转帖]图解一致性哈希算法,看这一篇就够了!

http://blog.itpub.net/70024420/viewspace-2925492/ 接下来介绍一个非常重要、也非常实用的算法:一致性哈希算法。通过介绍一致性哈希算法的原理并给出了一种实现和实际运用的案例,带大家真正理解一致性哈希算法。 一、背景 在具体介绍一致性哈希算法之前,先问一个

什么是ForkJoin?看这一篇就能掌握!

摘要:ForkJoin是由JDK1.7之后提供的多线程并发处理框架。 本文分享自华为云社区《【高并发】什么是ForkJoin?看这一篇就够了!》,作者: 冰 河。 在JDK中,提供了这样一种功能:它能够将复杂的逻辑拆分成一个个简单的逻辑来并行执行,待每个并行执行的逻辑执行完成后,再将各个结果进行汇总

驱动开发:内核封装TDI网络通信接口

在上一篇文章`《驱动开发:内核封装WSK网络通信接口》`中,`LyShark`已经带大家看过了如何通过WSK接口实现套接字通信,但WSK实现的通信是内核与内核模块之间的,而如果需要内核与应用层之间通信则使用TDK会更好一些因为它更接近应用层,本章将使用TDK实现,TDI全称传输驱动接口,其主要负责连接`Socket`和协议驱动,用于实现访问传输层的功能,该接口比`NDIS`更接近于应用层,在早期W

驱动开发:内核解析PE结构导出表

在笔者的上一篇文章`《驱动开发:内核特征码扫描PE代码段》`中`LyShark`带大家通过封装好的`LySharkToolsUtilKernelBase`函数实现了动态获取内核模块基址,并通过`ntimage.h`头文件中提供的系列函数解析了指定内核模块的`PE节表`参数,本章将继续延申这个话题,实现对PE文件导出表的解析任务,导出表无法动态获取,解析导出表则必须读入内核模块到内存才可继续解析,所

驱动开发:内核监视LoadImage映像回调

在笔者上一篇文章`《驱动开发:内核注册并监控对象回调》`介绍了如何运用`ObRegisterCallbacks`注册`进程与线程`回调,并通过该回调实现了`拦截`指定进行运行的效果,本章`LyShark`将带大家继续探索一个新的回调注册函数,`PsSetLoadImageNotifyRoutine`常用于注册`LoadImage`映像监视,当有模块被系统加载时则可以第一时间获取到加载模块信息,需要