V13.1 单元格格式功能增强-格式字符串

收藏

本帖最后由 Fiooona 于 2020-9-24 18:33 编辑

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

在SpreadJS v13.1中，我们将这个功能设计成了一个称为格式字符串的功能。

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

有三个不同的功能点是：

文字模板
公式
@符号

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

创建工程

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

<font size="4"><!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></font>

复制代码

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

<font size="4">npm install @grapecity/spread-sheets @grapecity/spread-sheets-excelio</font>

复制代码

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

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

复制代码

接下来添加脚本代码来初始化SpreadJS实例并将该模板加载到其中：

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

复制代码

现在，我们已经准备好了HTML文件和脚本，要开始添加格式字符串：

image.png117042540.png

Text Templates 文本模板

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

我们可以为每个单元格创建单独的样式来定义下面四个内容：

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

定义文本模板时，可以正常编写显示的文本。但是，要定义公式必须以“ $”开头，后跟花括号，如下所示：

<font size="4">"Formulas go within the brackets like this: ${{ FORMULA HERE }}"</font>

复制代码

现在，我们要添加SUM公式来计算每个月收入的总和，因此我们可以这样定义样式：

<font size="4">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;</font>

复制代码

然后我们给单元格设置样式: sheet.setStyle(6, 1, textTemplateStyle1);
现在，具有该样式的单元格将显示文本以及该公式的求值结果，如下所示：

image.png294117430.png

这可以实现将许多不同的公式和值组合到一个单元格中而无需使用额外的单元格进行计算。

公式和@符号
使用格式字符串的另一种方法是使用公式和数据。在某些情况下，您的工作簿中可能有一个单元格，其中包含一些数据，但是你想在同一单元格的某些计算中使用该数据。这时候我们可以使用“ @”符号：在为该单元格创建格式字符串时，可以引用该单元格中的数据。
当要使用一片区域的单元格时，SpreadJS将返回单元格范围引用，我们可以使用它来创建迷你图。

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

<font size="4">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);</font>

复制代码

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

<font size="4">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'
}
]
}
}
];</font>

复制代码

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

@

使用当前单元格值，从命名的引用范围中获取相应的单元格范围引用字符串

INDIRECT

获取单元格范围的引用

COLUMNSPARKLINE（，0）

从单元格范围引用创建列迷你图
将所有内容合并到格式化字符串中，如下方定义：

<font size="4">formulaStyle.formatter = '=COLUMNSPARKLINE(INDIRECT(@),0)';</font>

复制代码

最后，我们可以使用setStyle设置样式：

<font size="4">sheet.setStyle(9, 4, formulaStyle);</font>

复制代码

通过使用这些格式字符串，可以看到仅用几行JavaScript代码就可以创建一个交互式预算表。
image.png535877074.png

附件中可下载该示例的完整代码。

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

V13.1 单元格格式功能增强-格式字符串

0 个回复

微信认证勋章