SpreadJS是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受以華為、蘇寧易購、天弘基金等為代表的企業用戶青睞。SpreadJS 為用戶帶來親切的 Excel 使用體驗的同時，滿足 Web Excel 組件開發、表格文檔協同編輯、數據填報、Excel 類報表設計等業務場景，極大降低了企業研發成本和項目交付風險。

點擊下載SpreadJS最新試用版

使用 Formula 規則

DateFormula 規則可以讓你使用公式來檢查單元格的條件。

以下代碼創建了 Formula 規則。

var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
var ranges = [new GC.Spread.Sheets.Range(0, 0, 2, 1)];
activeSheet.conditionalFormats.addFormulaRule("=A1=B1+C1", style, ranges);
activeSheet.setValue(0, 0, 2,3);
activeSheet.setValue(0, 1, 1,3);
activeSheet.setValue(0, 2,1,3);
activeSheet.setValue(1, 0, 1,3);
// OR
var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
var rule = new GC.Spread.Sheets.ConditionalFormatting.NormalConditionRule();
rule.ruleType(GC.Spread.Sheets.ConditionalFormatting.RuleType.FormulaRule);
rule.formula("=A1=B1+C1");
rule.ranges([new GC.Spread.Sheets.Range(0, 0, 2, 1)]);
rule.style(style);
activeSheet.conditionalFormats.addRule(rule);
activeSheet.setValue(0, 0, 2,3);
activeSheet.setValue(0, 1, 1,3);
activeSheet.setValue(0, 2,1,3);
activeSheet.setValue(1, 0, 1,3);

Icon Set 規則可以基于單元格中的值來顯示圖標，如下圖所示：

你可以使用iconSetType 方法和IconSetType枚舉來指定圖標的樣式。你也可以使用reverseIconOrder方法來反轉圖標的樣式。或者使用 showIconOnly方法設置只顯示圖標還是圖標和數據一起顯示。或自行創建一系列的圖標。

以下代碼創建了 Icon Set 規則：

activeSheet.setValue(0,0,1,3);
activeSheet.setValue(1,0,15,3);
activeSheet.setValue(2,0,25,3);
activeSheet.setValue(3,0,-1,3);
var iconSetRule = new GC.Spread.Sheets.ConditionalFormatting.IconSetRule();
iconSetRule.ranges([new GC.Spread.Sheets.Range(0,0,4,1)]);
iconSetRule.iconSetType(GC.Spread.Sheets.ConditionalFormatting.IconSetType.FourTrafficLights);
var iconCriteria = iconSetRule.iconCriteria();
iconCriteria[0] = new GC.Spread.Sheets.ConditionalFormatting.IconCriterion(true, GC.Spread.Sheets.ConditionalFormatting.IconValueType.Number, 1);
iconCriteria[1] = new GC.Spread.Sheets.ConditionalFormatting.IconCriterion(true, GC.Spread.Sheets.ConditionalFormatting.IconValueType.Number, 10);
iconCriteria[2] = new GC.Spread.Sheets.ConditionalFormatting.IconCriterion(true, GC.Spread.Sheets.ConditionalFormatting.IconValueType.Number, 20);
iconSetRule.reverseIconOrder(false);
iconSetRule.showIconOnly(false);
activeSheet.conditionalFormats.addRule(iconSetRule);

以下代碼在 Icon Set 規則中創建了自定義圖標。

activeSheet.setValue(0,0,1,3);
activeSheet.setValue(1,0,15,3);
activeSheet.setValue(2,0,25,3);
activeSheet.setValue(3,0,-1,3);
var base = GC.Spread.Sheets.ConditionalFormatting.IconSetRule.getIcon;
GC.Spread.Sheets.ConditionalFormatting.IconSetRule.getIcon = function (iconSetType, iconIndex) {
var icon = base.apply(this, arguments);
if (iconSetType === GC.Spread.Sheets.ConditionalFormatting.IconSetType.ThreeArrowsColored) {
if (iconIndex === 0) {
return "images/Star2.png";
} else if (iconIndex === 1){
return "images/Rating4.png";
} else if (iconIndex === 2) {
return "images/Box4.png";
}
}
return icon;
};
var iconSetRule = new GC.Spread.Sheets.ConditionalFormatting.IconSetRule();
iconSetRule.ranges([new GC.Spread.Sheets.Range(0,0,4,1)]);
iconSetRule.iconSetType(GC.Spread.Sheets.ConditionalFormatting.IconSetType.ThreeArrowsColored);
var iconCriteria = iconSetRule.iconCriteria();
iconCriteria[0] = new GC.Spread.Sheets.ConditionalFormatting.IconCriterion(true, GC.Spread.Sheets.ConditionalFormatting.IconValueType.Number, 1);
iconCriteria[1] = new GC.Spread.Sheets.ConditionalFormatting.IconCriterion(true, GC.Spread.Sheets.ConditionalFormatting.IconValueType.Number, 10);
iconCriteria[2] = new GC.Spread.Sheets.ConditionalFormatting.IconCriterion(true, GC.Spread.Sheets.ConditionalFormatting.IconValueType.Number, 20);
iconSetRule.reverseIconOrder(false);
iconSetRule.showIconOnly(false);
activeSheet.conditionalFormats.addRule(iconSetRule);