SpreadJS Documentation > Developer's Guide > Customizing the Appearance > Using Conditional Formatting > Using the Icon Set Rule |
The icon set rule displays icons based on the values. You can specify the type of icon and whether to show the icon or the icon and the data in the cell. The following image displays icons and values.
You can specify many different types of icon sets with the iconSetType method and the IconSetType class. You can reverse the icon order with the reverseIconOrder method. You can use the showIconOnly method to display the icon or the icon and data.
You can also create custom icons for the icon set rule.
This example creates an icon set rule.
JavaScript |
Copy Code
|
---|---|
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 cfs = activeSheet.getConditionalFormats(); var iconSetRule = new GcSpread.Sheets.IconSetRule(); iconSetRule.ranges =[new GcSpread.Sheets.Range(0,0,4,1)]; iconSetRule.iconSetType(GcSpread.Sheets.IconSetType.FourTrafficLights); var iconCriteria = iconSetRule.iconCriteria(); iconCriteria[0] = new GcSpread.Sheets.IconCriterion(true, GcSpread.Sheets.IconValueType.Number, 1); iconCriteria[1] = new GcSpread.Sheets.IconCriterion(true, GcSpread.Sheets.IconValueType.Number, 10); iconCriteria[2] = new GcSpread.Sheets.IconCriterion(true, GcSpread.Sheets.IconValueType.Number, 20); iconSetRule.reverseIconOrder(false); iconSetRule.showIconOnly(false); cfs.addRule(iconSetRule); |
This example creates custom icons for the icon set rule.
JavaScript |
Copy Code
|
---|---|
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 = GcSpread.Sheets.IconSetRule.getIcon; GcSpread.Sheets.IconSetRule.getIcon = function (iconSetType, iconIndex) { var icon = base.apply(this, arguments); if (iconSetType === GcSpread.Sheets.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 cfs = activeSheet.getConditionalFormats(); var iconSetRule = new GcSpread.Sheets.IconSetRule(); iconSetRule.ranges =[new GcSpread.Sheets.Range(0,0,4,1)]; iconSetRule.iconSetType(GcSpread.Sheets.IconSetType.ThreeArrowsColored); var iconCriteria = iconSetRule.iconCriteria(); iconCriteria[0] = new GcSpread.Sheets.IconCriterion(true, GcSpread.Sheets.IconValueType.Number, 1); iconCriteria[1] = new GcSpread.Sheets.IconCriterion(true, GcSpread.Sheets.IconValueType.Number, 10); iconCriteria[2] = new GcSpread.Sheets.IconCriterion(true, GcSpread.Sheets.IconValueType.Number, 20); iconSetRule.reverseIconOrder(false); iconSetRule.showIconOnly(false); cfs.addRule(iconSetRule); |