单元格状态

当单元格状态在特定状态（例如编辑，悬停，活动，选择等）下匹配时，SpreadJS允许用户配置自定义单元格样式。此功能有助于在表单中创建输入表单控件，高级结构化表单和其他交互式表单，您可以在其中想要根据单元格的当前状态指定单元格样式。

单元状态表示单元如何响应用户的不同动作。通常，单元状态是样式的一部分，用户可以创建自定义的命名样式，以有选择地，轻松地应用各种单元特征。通过实现单元状态，用户可以为基于表单的表单和交互式仪表板创建现代的用户界面。此外，用户可以突出显示所选/活动单元格的活动行和列，并实时处理应用程序。

示例 - 以下截图描绘了当用户将鼠标悬停在单元格上，选择一个单元格或变更表单中单元格的状态时的不同单元格样式。在此示例中，当单元格处于悬停状态时，单元格的背景色变为粉红色，而单元格的前景色变为红色。当选中一个单元格时，单元格颜色变为黄色，而当单元格状态变脏时，背景色变为蓝色，前景色变为红色。

单元格状态的类型

CellStatesType 枚举可用于处理电子表格中的不同单元格状态，如下表所示：

类型和值	描述
hover = 0x01	当鼠标悬停在单元格上时执行指定的操作。
invalid = 0x02	如果在数据验证期间条件评估失败，则将单元格状态设置为无效。
readonly = 0x04	锁定受保护工作表中的单元格。
edit = 0x08	在编辑单元格时执行指定的操作。
active = 0x10	当单元格处于焦点时执行指定的操作。
selected = 0x20	当单元格位于工作表的选定范围内时执行指定的操作。
dirty = 0x40	在更改单元格值或引用单元格值时将单元格状态设置为脏，以便轻松跟踪工作表数据中的任何更改。
invalidFormula = 0x80	使用无效的公式字符串标记单元格。

优先顺序

在表单中为各种单元格状态配置不同的单元格样式时，按以下顺序遵循优先级：

edit > hover > active > selected > invalid formula > dirty > invalid > read-only

其中处于正常状态的单元优先级最低，处于编辑模式的单元具有最高优先级。

如果两个不同像元范围的像元状态样式彼此相交，则用户最后设置的样式将具有更高的优先级。

代码

当用户将鼠标悬停在单元格上或在表单中选择一个单元格时，请参考以下示例代码以应用不同的样式。

// 初始化 Spread
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// 获取表单
var activeSheet = spread.getSheet(0);
// 将数据添加到表单
activeSheet.setValue(0, 1, "Y-2015");
activeSheet.setValue(0, 2, "Y-2016");
activeSheet.setValue(0, 3, "Y-2017");
activeSheet.setValue(0, 4, "Y-2018");
activeSheet.setValue(0, 5, "Y-2019");
activeSheet.setValue(1, 0, "Gradlco");
activeSheet.setValue(2, 0, "Saagiate");
activeSheet.setValue(3, 0, "Inferno");
activeSheet.setColumnWidth(0, 120);

// 创建 HoverStyle
var hoverStyle = new GC.Spread.Sheets.Style();
hoverStyle.backColor = "pink";
hoverStyle.foreColor = "red";

// 创建SelectStyle
var selectStyle = new GC.Spread.Sheets.Style();
selectStyle.backColor = "yellow";
selectStyle.foreColor = "red";

// 创建DirtyStyle
var dirtyStyle = new GC.Spread.Sheets.Style();
dirtyStyle.backColor = 'lightblue';
dirtyStyle.foreColor = 'red';

// 访问单元格范围A1：J10
var range = new GC.Spread.Sheets.Range(0, 0, 10, 10);

// 在不同的CellStatesType上应用样式
activeSheet.cellStates.add(range, GC.Spread.Sheets.CellStatesType.dirty, dirtyStyle);
activeSheet.cellStates.add(range, GC.Spread.Sheets.CellStatesType.selected, selectStyle);
activeSheet.cellStates.add(range, GC.Spread.Sheets.CellStatesType.hover, hoverStyle);