以公式驱动的值格式与增强格式字符串混合使用

收藏

SpreadJS一直支持格式化单元格以满足不同要求的能力，但是在实现公式的过程中，除了专门的格式化外，还必须使用多个单元格。

使用SpreadJS v13.1，我们已经将这个想法组合成一个称为格式字符串的功能。

在这里，我们将介绍格式字符串的功能，以及如何在应用程序中利用它们。

这三个不同的部分是：

文字范本
公式
@符号

它们可以单独使用或组合使用，以满足您对工作簿中的单元格格式设置的特定要求。在此博客中，我们将导入一个Excel模板并将格式字符串添加到一些单元格中，以显示它们如何仅用几行JavaScript代码就能增强您的工作簿。

项目设置要开始使用格式字符串，我们首先可以使用SpreadJS引用创建一个简单的HTML文件：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>SpreadJS Format Strings</title>
<link href="./node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"></script>
<script type="text/javascript" src="./node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js"></script>
</head>
<body>
<div id="spreadSheet" style="width: 1300px; height: 800px; border: 1px solid gray"></div>
</body>
</html>

复制代码

由于我们引用了SpreadJS NPM文件，因此我们将需要使用命令提示符导航到项目文件夹并运行以下命令：

npm install @grapecity/spread-sheets @grapecity/spread-sheets-excelio

复制代码

对于此演示，我们可以使用Excel模板并将其导入SpreadJS。为简单起见，我使用SpreadJS Designer从Excel模板创建了一个JS文件，并将其包含在演示zip文件中。要将文件加载到HTML页面中，只需添加以下行：

<script type="text/javascript" src="./ExcelTemplate.js"></script>

复制代码

我们还可以添加脚本代码来初始化SpreadJS实例并将该模板加载到其中：

<script>
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("spreadSheet"), { sheetCount: 1 });
spread.fromJSON(ExcelTemplate);
var sheet = spread.getActiveSheet();
}
</script>

复制代码

现在，我们已经准备好将HTML文件和脚本添加到以下格式字符串：
image.png725641174.png

文字范本

在第一种格式字符串中，我们可以添加文本模板。这些实际上使您可以执行字符串连接，而不必为数据和文本使用单独的单元格。在这种情况下，我们可以将“预计每月收入”和“实际每月收入”部分的总计加在一起。这些部分中尚无公式可将它们添加在一起，因此我们既可以创建公式，也可以定义用于格式化的字符串。

我们可以为每个单元格创建单独的样式以定义四件事：

格式化程序
背景颜色
字形
垂直对齐

定义文本模板时，可以正常书写显示的文本。但是，您要评估的公式需要以“ $”开头，后跟方括号，如下所示：

"Formulas go within the brackets like this: ${{ FORMULA HERE }}"

在这种情况下，我们要指定要添加的SUM公式是每个月收入的总和，因此我们可以这样定义样式：

var textTemplateStyle1 = new GC.Spread.Sheets.Style();
textTemplateStyle1.formatter = "Total projected monthly income is ${{=SUM(C5:C6)}}";
textTemplateStyle1.backColor = "#91e0ff";
textTemplateStyle1.font = "bold 12pt Lucida Sans";
textTemplateStyle1.vAlign = GC.Spread.Sheets.VerticalAlign.center;

复制代码

然后我们可以为单元格设置该样式：

sheet.setStyle(6, 1, textTemplateStyle1);

复制代码

现在，具有该样式的单元格将显示文本以及该公式的求值结果，如下所示：
image.png244780577.png

这对于将许多不同的公式和值组合到一个单元格中而无需使用额外的单元格进行计算（如报表或仪表板）而言尤其有用。

公式和“ @”符号

使用格式字符串的另一种方法是使用公式和数据。在某些情况下，您的工作簿中可能会有一个单元格，其中包含一些数据，但是您想在同一单元格的某些计算中使用该数据。这是“ @”符号的出现位置：在为该单元格创建格式字符串时，可以引用该单元格中的数据。作为该项目的示例，我们可以使用它来引用通过命名范围链接到单元格范围引用的单元格中数据集的名称。

当使用范围名称时，SpreadJS将返回单元格范围引用，我们可以使用它来创建迷你图。

首先，我们可以为单元格范围引用添加一些自定义名称：

sheet.addCustomName('Housing', '=$C$15:$C$24', 0, 0);
sheet.addCustomName('Entertainment', '=$H$15:$H$23', 0, 0);
sheet.addCustomName('Loans', '=$H$27:$H$32', 0, 0);

复制代码

这些单元格范围参考对应于“个人每月预算”表中每个不同部分的“预计成本”列。为了使用户更容易更改迷你图的数据，我们可以为每个部分的名称创建一个下拉列表，确保它们与我们定义的自定义名称匹配：

var formulaStyle = new GC.Spread.Sheets.Style();
formulaStyle.backColor = '#fff2cc';
formulaStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openList",
useButtonStyle: true
}
]
formulaStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.list,
option: {
items: [
{
text: 'Housing',
value: 'Housing'
},
{
text: 'Entertainment',
value: 'Entertainment'
},
{
text: 'Loans',
value: 'Loans'
}
]
}
}
];

复制代码

现在，我们拥有使用查找表，公式和“ @”符号创建带有格式字符串的动态迷你图所需的一切。该字符串将包含三个部分：

@
- 使用当前单元格值（在这种情况下为数据节名称）从命名范围中获取相应的单元格范围引用字符串
INDIRECT（<单元格范围参考字符串上方）
- 从单元格范围参考字符串获取单元格范围参考
COLUMNSPARKLINE（, 0)
- 根据单元格范围参考创建列迷你图

将所有内容合并到格式化程序中，将其定义为：

formulaStyle.formatter = '=COLUMNSPARKLINE(INDIRECT(@),0)';

最后，我们可以使用单元格中的格式化程序设置该样式： sheet.setStyle(9, 4, formulaStyle);

由于迷你图不显示数据名称，因此我们可以设置另一个格式字符串以仅在下面的单元格中显示数据节名称：

sheet.getRange(11, 4, 1, 1).formatter('=E10');

使用所有这些格式字符串，您可以看到仅用几行JavaScript代码就可以创建一个交互式预算表。

格式字符串只是我们在v13.1中为SpreadJS添加的众多新功能之一。

		自动登录	找回密码
密码			立即注册

以公式驱动的值格式与增强格式字符串混合使用

0 个回复

活字格认证

讲师达人

悬赏达人

微信认证勋章

元老葡萄

SpreadJS 认证

SpreadJS 高级认证