技術標籤：介面開發教程Spreadjsjavascriptexcel表格開發

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

點選下載SpreadJS最新試用版

使用 Cell Value 規則

Cell Value 規則將會比對 cell 的值。

以下程式碼使用了 Cell Value 規則。

JavaScript

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.CellValueRule);
rule.ranges([new GC.Spread.Sheets.Range(0,0,5,1)]);
rule.operator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.Between);
rule.style(style);
rule.value1(2);
rule.value2(100);
activeSheet.conditionalFormats.addRule(rule);
activeSheet.setValue(0,0,1,3);
activeSheet.setValue(1,0,45,3);
// OR
var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
var ranges=[new GC.Spread.Sheets.Range(0,0,5,1)];
activeSheet.conditionalFormats.addCellValueRule(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.Between, 2, 100, style, ranges);
activeSheet.setValue(0,0,1,3);
activeSheet.setValue(1,0,45,3);
 

使data bar規則

Spread.Sheets 支援 data bar 規則.data bar 在每一個單元格中顯示了一個長條。長條的長度與單元格中的資料有關。長條的長度越長，單元格中的值越大。你可以設定最大值和最小值的型別和值minType方法可以設定為Number, LowestValue, HighestValue, Percent, Formula, Percentile, 和 Automin 或者 Automax。

你可以使用addDataBarRule方法來建立一個規則並將其放到規則集合中。BarDirection類和DataBarAxisPosition類可以用來設定橫條的朝向和正值的方向。

示例程式碼

以下例子建立了一個 Data Bar 規則並addRule方法新增該規則。

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 dataBarRule = new GC.Spread.Sheets.ConditionalFormatting.DataBarRule(GC.Spread.Sheets.ConditionalFormatting.ScaleValueType.Number, -1, GC.Spread.Sheets.ConditionalFormatting.ScaleValueType.Number, 40, "green", [new GC.Spread.Sheets.Range(0,0,4,1)]);
dataBarRule.color("green");
dataBarRule.showBorder(true);
dataBarRule.borderColor("orange");
dataBarRule.dataBarDirection(GC.Spread.Sheets.ConditionalFormatting.BarDirection.LeftToRight);
dataBarRule.negativeFillColor("yellow");
dataBarRule.useNegativeFillColor(true);
dataBarRule.negativeBorderColor("red");
dataBarRule.useNegativeBorderColor(true);
dataBarRule.axisPosition(GC.Spread.Sheets.ConditionalFormatting.DataBarAxisPosition.Automatic);
dataBarRule.axisColor("blue");
dataBarRule.showBarOnly(false);
activeSheet.conditionalFormats.addRule(dataBarRule);

本文轉載自葡萄城