要创建我们的现金流日历,我们需要创建如下所述的三张表:
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);
SpreadJS设计器:
选择单元格(在我们的例子中为 B2)
1. 主页选项卡 → 单元格下拉菜单 → 月份选择器
2. 在命令右侧,单击...
3. 设置选取器的开始、结束年份和高度
然后,我们在进行计算时为包含月份的单元格指定一个名称。
1. 在公式选项卡上,选择名称管理器
2. 在弹出窗口中,单击新建按钮
3. 设置单元格的名称。在我们的示例中:name: currentMonth
参考:$D$2。你还可以添加评论并更改引用对象