单元格填充效果

SpreadJS提供了渐变颜色和图案填充颜色,以增强单元格的背景色。

尝试在下面的SpreadJS实例中选择一个单元格区域,然后在右侧面板中更改填充设置。

除了纯色填充的背景色外,现在SpreadJS还支持渐变单元填充和图案单元填充。 以下示例显示了从上到下渐变为红色、白色以及蓝色的设置。 以下示例显示了从内到外渐变为红色、白色以及蓝色的设置。 以下示例显示了白色背景上使用浅横线类型的红色图案填充。
window.onload = initFunction; function initFunction() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1}); spread.suspendPaint(); var sheet = spread.getActiveSheet(); initSheet(sheet); // Set range with pattern fill sheet.getRange(3, 2, 3, 2).backColor({type: GC.Spread.Sheets.PatternType.darkDown, backgroundColor: '#CFE1F3', patternColor: "white"}); sheet.getRange(6, 1, 12, 1).backColor({type: GC.Spread.Sheets.PatternType.gray125, backgroundColor: '#CCC1DA', patternColor: "white"}); // Set range with gradient path fill sheet.getRange(1, 3, 1, 1).backColor({type:"path", left: 0.1, top: 0.3, right: 0.9, bottom: 0.6, stops: [{position:0, color:"orange"},{position:1, color:"white"}]}); // Set conditional format with gradient path fill var cfs = sheet.conditionalFormats; var style = new GC.Spread.Sheets.Style(); style.backColor = {degree: 90, stops: [{position:0.3, color:"white"},{position:1, color:"#FFCCCC"},]}; cfs.addCellValueRule(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.greaterThan, 250000, 0, style, [new GC.Spread.Sheets.Range(6, 2, 12, 1)]); // Set table style with gradient fill var border = new GC.Spread.Sheets.LineBorder(); var tableStyle = new GC.Spread.Sheets.Tables.TableTheme(); tableStyle.name('tableStyle1'); tableStyle.secondRowStripStyle(new GC.Spread.Sheets.Tables.TableStyle({degree: 90, stops: [{position:0, color:"accent 1"},{position:0.1, color:"white"},{position:0.7, color:"white"},{position:1, color:"accent 6"},]}, 'black', '10px arial', border, border, border, border, border, border)) tableStyle.firstRowStripStyle(new GC.Spread.Sheets.Tables.TableStyle({degree: 90, stops: [{position:0, color:"accent 6"},{position:0.1, color:"white"},{position:0.7, color:"white"},{position:1, color:"accent 1"},]}, 'black', '10px arial', border, border, border, border, border, border)) sheet.tables.findByName('cT').style(tableStyle); spread.resumePaint(); // Here add the event. document.getElementById('setGradientButton').onclick = function (e) { var backColor = {}; backColor.degree = parseInt(document.getElementById('gradientDegree').value, 10); backColor.stops = JSON.parse(document.getElementById('gradientStops').value); sheet = spread.getActiveSheet(); var selection = sheet.getSelections()[0]; if (selection) { sheet.getRange(selection.row, selection.col, selection.rowCount, selection.colCount).backColor(backColor); } }; document.getElementById('setPathButton').onclick = function (e) { var backColor = {type: "path"}; backColor.left = parseFloat(document.getElementById('pathLeft').value); backColor.right = parseFloat(document.getElementById('pathRight').value); backColor.top = parseFloat(document.getElementById('pathTop').value); backColor.bottom = parseFloat(document.getElementById('pathBottom').value); backColor.stops = JSON.parse(document.getElementById('pathStops').value); sheet = spread.getActiveSheet(); var selection = sheet.getSelections()[0]; if (selection) { sheet.getRange(selection.row, selection.col, selection.rowCount, selection.colCount).backColor(backColor); } }; document.getElementById('setPatternButton').onclick = function (e) { var backColor = {}; backColor.type = GC.Spread.Sheets.PatternType[document.getElementById('patternType').value]; backColor.backgroundColor = document.getElementById('bgColor').value; backColor.patternColor = document.getElementById('patternColor').value; sheet = spread.getActiveSheet(); var selection = sheet.getSelections()[0]; if (selection) { sheet.getRange(selection.row, selection.col, selection.rowCount, selection.colCount).backColor(backColor); } }; } function initSheet(sheet) { var gcns = GC.Spread.Sheets; var data = [ [, "FY 2019"], [, "Sales"], [, "Monthly", "Cumulative"], ["Apr", 188897, 188897], ["May", 208146, 397043], ["Jun", 226196, 623239], ["Jul", 277318, 900557], ["Aug", 263273, 1163830], ["Sep", 259845, 1423675], ["Oct", 241047, 1664722], ["Nov", 256306, 1921028], ["Dec", 195845, 2116873], ["Jan", 204934, 2321808], ["Feb", 257852, 2579660], ["Mar", 227779, 2807439] ]; sheet.setArray(3, 1, data); sheet.setColumnWidth(2, 110); sheet.setColumnWidth(3, 110); sheet.setRowCount(20); sheet.setColumnCount(9); sheet.options.gridline.showHorizontalGridline = false; sheet.options.gridline.showVerticalGridline = false; sheet.getRange(3, 1, 15, 3).setBorder( new gcns.LineBorder("black", gcns.LineStyle.medium), { all: true }); sheet.addSpan(3, 2, 1, 2); sheet.addSpan(4, 2, 1, 2); sheet.getRange(3, 2, 3, 2).hAlign(gcns.HorizontalAlign.center); var cMapSource = [ { "Currency": "USD", "Value": 1, "Symbol": "$" }, { "Currency": "CNY", "Value": 7.02, "Symbol": "¥" }, { "Currency": "JPY", "Value": 108.8, "Symbol": "¥" }, { "Currency": "EURO", "Value": 0.91, "Symbol": "€" }, ]; sheet.tables.addFromDataSource('cT', 3, 5, cMapSource); [5, 6, 7].forEach((col) => { sheet.setColumnWidth(col, 80); }); sheet.getCell(1, 2).value("Unit:").hAlign(gcns.HorizontalAlign.right); var dv1 = gcns.DataValidation.createFormulaListValidator('=cT[[#Data], [Currency]]'); sheet.setDataValidator(1, 3, dv1); sheet.getCell(1, 3).hAlign(gcns.HorizontalAlign.center).value("USD"); sheet.getRange(6, 2, 12, 2) .hAlign(gcns.HorizontalAlign.center) .formatter('=VLOOKUP($D$2,cT[#Data],3,FALSE)&" "&TEXT(@*VLOOKUP($D$2,cT[#Data],2,FALSE),"###,###")'); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="zh-cn" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <strong class="sp-demo-HeaderTitle">Settings:</strong> <P style="padding:2px 10px">Set the fill effect for the select range:</P> <fieldset> <div class="settingsDiv"> <div class="option-row"> <label for="gradientDegree">Degree:</label> <input type="text" id="gradientDegree" value="45"> </div> <div class="option-row"> <label for="gradientStops">Stops:</label> <textarea id="gradientStops" rows="4">[{"position":0,"color":"yellow"},{"position":0.5,"color":"white"},{"position":1,"color":"green"}]</textarea> </div> <div class="option-row"> <button id="setGradientButton">Set Gradient Fill</button> </div> </div> </fieldset> <fieldset> <div class="settingsDiv"> <div class="option-row"> <label for="pathLeft">Left:</label> <input type="text" id="pathLeft" value="0.5"> </div> <div class="option-row"> <label for="pathRight">Right:</label> <input type="text" id="pathRight" value="0.9"> </div> <div class="option-row"> <label for="pathTop">Top:</label> <input type="text" id="pathTop" value="0.5"> </div> <div class="option-row"> <label for="pathBottom">Bottom:</label> <input type="text" id="pathBottom" value="0.7"> </div> <div class="option-row"> <label for="pathStops">Stops:</label> <textarea id="pathStops" rows="4">[{"position":0,"color":"yellow"},{"position":0.5,"color":"white"},{"position":1,"color":"green"}]</textarea> </div> <div class="option-row"> <button id="setPathButton">Set Gradient Path Fill</button> </div> </div> </fieldset> <fieldset> <div class="settingsDiv"> <div class="option-row"> <label for="patternType">Pattern Type:</label> <select id="patternType"> <option value="solid">solid</option> <option value="darkGray">darkGray</option> <option value="mediumGray">mediumGray</option> <option value="lightGray">lightGray</option> <option value="gray125">gray125</option> <option value="gray0615">gray0615</option> <option value="darkHorizontal">darkHorizontal</option> <option value="darkVertical">darkVertical</option> <option value="darkDown">darkDown</option> <option value="darkUp" selected="selected">darkUp</option> <option value="darkGrid">darkGrid</option> <option value="darkTrellis">darkTrellis</option> <option value="lightHorizontal">lightHorizontal</option> <option value="lightVertical">lightVertical</option> <option value="lightDown">lightDown</option> <option value="lightUp">lightUp</option> <option value="lightGrid">lightGrid</option> <option value="lightTrellis">lightTrellis</option> </select> </div> <div class="option-row"> <label for="bgColor">Background color:</label> <input type="text" id="bgColor" value="white"> </div> <div class="option-row"> <label for="patternColor">Pattern color:</label> <input type="text" id="patternColor" value="red"> </div> <div class="option-row"> <button id="setPatternButton">Set Pattern Fill</button> </div> </div> </fieldset> </div> </div></body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 1px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .options-container legend { text-align: center; } fieldset { margin-bottom: 5px; padding: 2px; } .option-row { font-size: 14px; padding: 2px; } input, textarea, select { display:block; width: 100%; margin: 4px 0; box-sizing: border-box; } label, input, textarea, select { padding: 1px 6px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } button { font-weight: bold; background-color: #ecf3ff; border-color: #0b93d5; width: 100%; height: 24px; border-radius: 4px; border-width: thin; }