自定义页面布局和主题

SpreadJS 中的主题可以改变工作表的外观。主题使用各种颜色和字体创建。它们可以帮助您创建视觉上吸引人的数据，并突出显示重要细节。

SpreadJS 提供了内置主题。但是，您也可以手动创建自定义主题，以使工作表具有独特的外观。如果需要，还可以自定义当前主题的颜色和字体。

默认情况下，主题设置仅应用于活动工作表。要将主题设置应用于所有打开的工作表，请将 ApplyThemeToAllSheets 属性设置为true。

// Apply theme to all worksheets.
designer.setData("ApplyThemeToAllSheets", true);

在 SpreadJS Designer 组件中，主题按钮位于"页面布局（PAGE LAYOUT）"选项卡组内的"主题（Themes）"选项卡中。

主题

您可以从可用的主题下拉列表中选择所需的主题。当鼠标悬停在下拉列表中列出的主题上时，您可以在工作表上看到预览，如下所示。

ApplyThemes.e8a4a2

创建自定义主题

要创建一个自定义主题，您需要修改命令上的dropdownList属性。以下示例向SpreadJS Designer组件的主题集合中添加了一个名为“我的自定义主题”的新主题。

// Create custom theme.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 2 });
let themeCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.ThemeSetting);
let customTheme = new GC.Spread.Sheets.Theme("customTheme1", GC.Spread.Sheets.ThemeColors.Apex, "Tw Cen MT", "Tw Cen MT");
themeCommand.dropdownList = [{ text: "My Custom Theme", value: JSON.stringify(customTheme) }];
let config = GC.Spread.Sheets.Designer.DefaultConfig;
if (!config.commandMap) config.commandMap = {};
// Add custom theme.
config.commandMap[GC.Spread.Sheets.Designer.CommandNames.ThemeSetting] = themeCommand;

customThemes.5c3478

主题颜色

主题颜色代表应用于文本、背景、强调、超链接等的颜色方案。为此，您需要点击与"颜色（Colors）"按钮相关联的下拉图标。然后从列表中选择所需的颜色方案，工作表中的颜色将根据所选项进行更改。当鼠标悬停在下拉列表中列出的颜色方案上时，您可以在工作表上看到预览，如下所示。

ApplyColors.812d13

创建自定义主题颜色

要创建一个新的自定义颜色方案，您需要修改命令上的dropdownList属性。以下示例将一个名为“我的自定义颜色”的新主题颜色添加到SpreadJS Designer组件的颜色集合中。

// Create custom theme color.
let themeColorCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.ThemeColors);
let customColorScheme = new GC.Spread.Sheets.ColorScheme("myColor", "#ffffff", "#dbeff9", "#000000", "#17406d", "#0f6fc6", "#009dd9", "#0bd0d9", "#10cf9b", "#7cca62", "#a5c249", "#51c3f9", "#4eb3cf");
themeColorCommand.dropdownList = [{ text: "My Custom Color", value: JSON.stringify(customColorScheme) }];
let config = GC.Spread.Sheets.Designer.DefaultConfig;
if (!config.commandMap) config.commandMap = {};
// Add custom theme.
colorconfig.commandMap[GC.Spread.Sheets.Designer.CommandNames.ThemeColors] = themeColorCommand;

新的自定义颜色方案将显示在颜色下拉列表中。

customColors.d91c45

主题字体

工作表中的标题、正文、列标题和行标题的文本字体样式可以使用主题字体进行更改。为此，您需要点击与"字体（Fonts）"按钮相关联的下拉图标。然后从列表中选择所需的字体样式，工作表中的字体将根据所选项进行更改。当鼠标悬停在下拉列表中列出的字体样式上时，您可以在工作表上看到预览，如下所示。

ApplyFonts.eb8222

创建自定义主题字体

要创建新的自定义主题字体，您需要修改命令上的dropdownList属性值。以下示例将一个名为“我的自定义字体”的新主题字体添加到SpreadJS Designer组件的字体集合中。

// Create custom theme font.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 2 });
let themeFontCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.ThemeFonts);
let customThemeFont = new GC.Spread.Sheets.ThemeFont('MyFont', 'Tw Cen MT', 'Rockwell');
themeFontCommand.dropdownList = [{ text: "My Custom Font", value: JSON.stringify(customThemeFont) }];
let config = GC.Spread.Sheets.Designer.DefaultConfig;
if (!config.commandMap) config.commandMap = {};
// Add custom theme font.
config.commandMap[GC.Spread.Sheets.Designer.CommandNames.ThemeFonts] = themeFontCommand;

新的自定义字体将显示在字体下拉列表中。

customFonts.16cae2

使用SpreadJS Designer进行自定义

您还可以使用SpreadJS Designer自定义所选主题的颜色和字体。

要自定义当前的颜色方案，请在颜色下拉列表底部单击“自定义颜色...”。在“自定义主题颜色”对话框中，选择所需的文本、背景、强调、超链接等颜色方案。请注意，在示例框中，您将获得对所做更改的预览。

customizeThemeColors.cc8169

此外，您还可以通过在字体下拉列表底部单击“自定义字体…”来自定义字体。在“自定义主题字体”对话框中，选择标题和正文所需的字体。选择后，您可以在示例框中看到所选字体的预览。

customizeThemeFonts.bfde50

type=warning
目前，SpreadJS Designer上的主题设置不支持撤销和重做功能。