现金流量表（CashFlowStatement）是指反映一定单位现金及现金等价物流入流出情况的报表会计期间。现金流量表是企业财务报表的三个基本报告之一（另外两个是资产负债表和损益表）。为了全面、系统地揭示企业一定时期内的财务状况、经营成果和现金流量，财务报表必须按照财政部会计准则的标准格式进行设计。因此，财务报表的典型特征是数据更新频繁、分析维度多、数据来源复杂。,传统的报表工具很难同时满足以上所有要求。本博客将向您展示如何使用类似Excel的JavaScript电子表格在前端创建现金流量日历。该日历将广泛使用以下强大的功能：动态数组公式-基于一个公式将多个结果返回到一系列单元格。此示例使用SEQUENCE和FILTER函数。RANGEBLOCKSPARKLINE(template_range,data_expr)-此迷你图允许开发人员将单元格范围模板(template_range)定义为单个单元格类型，并将该模板应用于单元格以将一组数据(data_expr)加载到模板中。该模板可以包括多行和/或多列。最终结果如图所示：单击此处下载完整示例。要创建我们的现金流量日历，我们需要创建三个表，如下所述：数据源表模板表现金流量日历：呈现表数据源表我们示例的数据源是交易列表。我们创建了一个更加动态的表格，当我们需要数据而不是一系列单元格时，我们可以在其中引用Table1。此表包含有关TransactionID、交易类型、交易日期、公司名称、帐户名称、存款金额和取款的信息。模板表此页面包含一系列模板，我们将使用这些模板来呈现现金流量日历中发生的交易。此处的此单元格范围将用作包含现金流量日历中所需信息的单元格的模板。我们做的第一件事是排列单元格，然后设置单元格的绑定路径。它可以使用SpreadJSsetBindingPath方法从Javascript完成。templateSheet.setBindingPath(0,1,"月");templateSheet.setBindingPath(1,2,"日期");templateSheet.setBindingPath(2,2,"开始");templateSheet.setBindingPath(3,2,"取款");templateSheet.setBindingPath(4,2,"存款");templateSheet.setBindingPath(5,2,"结束");当然，也有一种不用写代码就可以完成上述步骤的方法——使用SpreadJS设计器，下载SpreadJS并安装包，在下载的安装包中，从“\SpreadJS.Release.xml”目录中找到设计器的安装包。x.x.x\Designer\DesignerRuntime”路径，安装完成后，按照以下步骤操作：点击Data选项卡上的Template菜单-右侧会出现字段列表面板，鼠标悬停在Start分支上，点击绿色+添加字段按钮*请注意，您可以使用“x”按钮删除字段并使用位于分支右侧的设置修改它们将字段拖动到模板范围的所需单元格中，以便出现现金赤字（负期末余额）的日子可以用红色着色，绿色为正期末余额，黑色为中性，我们可以使用条件格式。这可以在设计器上完成：合并条件格式时选择日期单元格“A2:D2”→新建规则通常，键入并选择使用公式确定要格式化的单元格输入您的公式，在我们的示例中='CellTemplate'!$C$6>0单击格式→填充→选择绿色作为字体颜色重复相同的步骤但使用公式：='CellTemplate'!$C$6<0*注意对于负余额在这种情况下，颜色应该是设置为红色现金流日历：渲染表第1步：添加MonthPicker元素我们日历的第一个元素是可变月份元素。要添加它，请使用MonthPicker，SpreadJS中的下拉单元格样式。JavaScript:varmonthPickerStyle=newGC.Spread.Sheets.Style();monthPickerStyle.dropDowns=[{type:GC.Spread.Sheets.DropDownType.monthPicker,option:{startYear:2019,stopYear:2021,height:300,}}];sheet.setStyle(2,5,monthPickerStyle);Designer：选择单元格（在我们的例子中是B2）“主页”选项卡→“单元格”下拉菜单→“月份选择器”在命令的右侧，单击....setthestart,endyearandheightofthepicker我们然后为包含的单元格指定一个名称计算时的月份。在公式选项卡上，在弹出的窗口中选择名称管理器，点击新建按钮，设置单元格的名称。在我们的示例中：名称：currentMonth参考：$D$2。您还可以添加注释并更改引用对象第2步：创建现金流量日历使用SEQUENCE(行、列、开始、步骤)函数在我们的日历中分配日期。这允许我们稍后在CellClick上检索单元格值。单元格B4的公式为：=SEQUENCE(6,7,currentMonth-WEEKDAY(currentMonth)+1,1)JavaScript:cashflowSheet.setFormula(3,1,'=SEQUENCE(6,7,currentMonth-WEEKDAY(currentMonth)+1,1)');我们没有为这些单元格使用格式化程序。下一步是使用条件格式使属于其他月份的日期成为可能，但所选日期为空：选择B4:H9并选择日历的日期→条件格式。“将单元格格式化为规则类型”输入您的公式，在我们的例子中为“=MONTH(B4)<>MONTH(currentMonth)”-此格式仅适用于月份与下拉列表中选择的月份不同的单元格单击格式数字→自定义输入“;;;”作为格式化程序，使所有正确的单元格为空使用OBJECT函数将模板应用到我们现金流量日历中代表日期的所有单元格。由于我们使用SEQUENCE为这些单元格设置值，我们'我将使用RANGEBLOCKSPARKLINE作为格式。选择单元格区域B4:H9格式→更多数字格式→自定义将格式化程序设置为：=RANGEBLOCKSPARKLINE('CellTemplate'!$A$2:$D$7,OBJECT("date",@,"开始",IFERROR(SUM(FILTER(Table1[Deposit],Table1[Date]<@))-SUM(FILTER(Table1[Withdrawal],Table1[Date]<@)),0),"withdrawals",IFERROR(SUM(FILTER(Table1[取款],Table1[日期]=@)),0),"存款",IFERROR(SUM(FILTER(Table1[存款],Table1[日期]=@)),0),"月",MONTH($A$2)))作为第一个参数，将单元格范围作为TemplateSheet中的模板。作为一个s第二个参数，它需要一个从位于数据源表中的Table1获取数据的OBJECT。[Date]：单元格当前值[Start]：之前所有存款的总和-之前所有取款的总和[Withdrawal]：当前取款的总和[Deposit]：当前存款的总和使用公式就是绑定并返回一个范围模板，方便范围模板的使用。这是最终输出：如上图所示，包含日历日的单元格提供有关期初/期末余额、存款总额和取款总额的信息。第3步：获取每日交易如果我们想从数据源页面获取所有交易的列表，我们可以使用SelectionChanged事件。SpreadJS中的工作表在这些事件发生时将它们的事件绑定到特定的操作。在我们的示例中，当用户从日历中选择一个日期时，我们使用了这个方便的SpreadJS函数来提取所有交易的列表。我们为包含所选日期、存款和取款的单元格命名以进行计算，该表将包含所有交易数据。为currentMonth创建名称范围的步骤是：在“公式”选项卡上，选择“名称管理器”在弹出窗口中，单击“新建”按钮以设置单元格的名称在我们的示例中：名称：当前选择；参考：='Cash-Flow'!$B$11name:currentdeposit;参考：=FILTER(tblTransactions[Type]:tblTransactions[Withdrawal],(tblTransactions[Date]=CurrentSelection)*(tblTransactions[Deposit]>0))name:currentwithdrawal;参考：=FILTER(tblTransactions[Type]:tblTransactions[Withdrawal],(tblTransactions[Date]=CurrentSelection)*(tblTransactions[Withdrawal]>0))设置不同的公式得到所有存款列表，所有取款列表，期末余额和期初余额。起始余额（之前所有存款的总和-之前所有取款的总和）：=IFERROR((SUM(FILTER(tblTransactions[Deposit],tblTransactions[Date]<$B$11))-SUM(FILTER(tblTransactions[Withdrawal],tblTransactions[Date]<$B$11))),0)期末余额（期初余额+活期存款总和-活期取款总和）：=IFERROR(D13+(SUM(FILTER(tblTransactions[Deposit],tblTransactions[Date]=$B$11))-SUM(FILTER(tblTransactions[Withdrawal],tblTransactions[Date]=$B$11))),0)其中D13是起始余额：1.存款：=IFERROR(FILTER(currentDeposits,{1,0,1,1,0}),"")2.Withdrawal:=IFERROR(FILTER(currentWithdrawals,{1,0,1,0,1}),"")当前手动插入currentSelection。要根据用户日期选择进行更改，请继续执行下一步。在JavaScript中创建一个事件处理函数（见下文）：//在选择日期时，更新用于过滤数据的单元格以显示详细的交易列表cashflowSheet.bind(GC.Spread.Sheets.Events.SelectionChanged,function(sender,args){constsheet=args.sheet;constrow=args.newSelections[0].row;constcol=args.newSelections[0].col;if((row<3||row>=3+6)||(col<1||col>=1+7))return;//设置当前日期单元格以便FILTER更新。sheet.setValue(10,1,sheet.getValue(row,col));});用户单击单元格后，上面的代码会检查单元格是否在日历边界内(B4:H9)。否则，它会更新currentSelection，因此所有用于获取余额和交易信息的公式在引用更改的选定日期时都会给出正确的结果。了解更多demo示例：https://demo.grapecity.com.cn...移动端示例：http://demo.grapecity.com.cn/...
