修改自定义表格样式

SpreadJS 允许用户添加、删除和修改自定义表格样式，并将这些样式应用到表格中。要应用这些表格样式，您需要为表格设置一个样式名称。

要管理表格样式，可以使用 GC.Spread.Sheets.WorkBook 类的 customTableThemes 属性。

CustomTableThemesManager 类提供了以下方法来管理自定义表格主题：

• all: 获取所有自定义表格主题。

• get: 通过名称获取特定的自定义表格主题。

• add: 使用样式对象或名称添加新的自定义表格主题。

• remove: 通过名称删除自定义表格主题。

• update: 通过名称或样式对象更新现有的自定义表格主题。

此外，GC.Spread.Sheets.WorkBook 类的 defaultTableTheme 方法可以有效管理默认表格样式，以确保所有表格的一致外观和感觉。

type=warning

注意：

• 表格样式名称必须是唯一的

• 例如，如果您已经有一个名为 "TEST" 的自定义表格样式，则不能创建另一个相同名称的表格样式

• 表格样式名称不区分大小写

• defaultTableTheme 应该是表示表格样式名称的字符串

• 如果创建表格时未明确指定样式，并且存在具有此默认名称的样式，则该样式将应用于该表格

• 修改现有的表格样式会自动更新所有先前应用了该样式的表格

• 当删除表格样式时，所有使用该已删除样式的表格将使用默认样式

使用代码

以下代码示例演示了管理自定义表格主题的不同方法。

添加新的表格主题

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));

// 添加一个名为 "custom0" 的新表格样式。
let tableStyle = spread.customTableThemes.add("custom0");
const firstColumnStripStyle = new GC.Spread.Sheets.Tables.TableStyle();
firstColumnStripStyle.backColor = "#0C66E4";
tableStyle.firstColumnStripStyle(firstColumnStripStyle);

获取表格主题

// 获取表格样式。
tableStyle = spread.customTableThemes.get("custom0");

应用表格主题

// 将表格样式应用于表格。
let table = activeSheet.tables.add("table1", 1, 1, 10, 5);
table.styleName("custom0");

当为表格设置样式名称时，表格会根据名称获取样式。如果样式名称匹配内部样式，将直接应用。如果不匹配，将在 customStyles 集合中搜索相应的样式。如果找到，则应用该样式。否则，将使用默认样式。

修改表格主题

// 修改表格样式。
const tableStyle = spread.customTableThemes.get("custom0");
tableStyle.firstColumnStripStyle().backColor = "red";

// 更新表格主题。
spread.customTableThemes.update("custom0", new GC.Spread.Sheets.Tables.TableTheme());

删除表格主题

// 删除表格样式。
spread.customTableThemes.remove("custom0");

设置默认主题

// 设置默认表格样式。
spread.defaultTableTheme("custom0");

使用设计器

您还可以使用 SpreadJS 设计器组件通过以下步骤格式化自定义表格样式：

点击表格设计 > 表格样式组中的格式化表格按钮。

点击下拉箭头并选择新表格样式选项，通过设置所需的样式元素添加新的表格样式。

所有用户创建的表格样式显示在表格样式集合列表的自定义部分下。

右键点击自定义表格样式，执行应用、修改、复制、删除和设置为默认操作，根据需要进行操作。

type=warning

注意：无法修改或删除内置表格样式。