你可以构造一个样式并设置不同的属性, 示例代码如下:
然后你可以将此样式设置给单元格, 行, 列, 或者一片区域:
样式在不同的层级结构中具有不同的优先级别, 如下: 单元格 > 行 > 列。
SpreadJS 支持给样式设置一个名称, 并将这个命名过的样式加入到表单的名称样式集合中。这样让样式的使用和管理更方便。
你可以构造一个名称样式, 并将此样式添加到表单或者 Spread 控件的名称样式集合中。
当名称样式添加到表单名称样式集合中后, 可以通过样式的名称找到它或直接通过名称设置样式:
如果名称样式不再使用, 你可以将其从名称集合中删除掉:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<p style="padding:2px 10px;">Spread Styles are useful for consolidating visual properties that are use in a lot of
different cells.</p>
<p style="padding:2px 10px; background-color:#F4F8EB">Select cell C2, E2, E5 or E10 then any other cell to see
difference between the getStyle and getActualStyle api.</p>
<label id="getStyleLabel" for="getStyle">sheet.getStyle({{rowIndex}}, {{columnIndex}})</label>
<input id="getStyle" type="text" disabled="disabled" :style="{ backgroundColor: backgroundColor }" />
<label id="getActualStyleLabel" for="getActualStyle">sheet.getActualStyle({{rowIndex}}, {{columnIndex}})</label>
<input id="getActualStyle" type="text" disabled="disabled" :style="{ backgroundColor: actualBackgroundColor }" />
</div>
</div>
</template>
<script>
import Vue from "vue";
import '@grapecity-software/spread-sheets-resources-zh';
GC.Spread.Common.CultureManager.culture("zh-cn");
import "@grapecity-software/spread-sheets-vue";
import GC from "@grapecity-software/spread-sheets";
import "./styles.css";
const spreadNS = GC.Spread.Sheets;
const data = [
["Month", "Payment", "Principal", "Interest", "Balance"],
[1, 8750.00, 8333.34, 416.67, 91666.67],
[2, 8715.28, 8333.34, 381.94, 83333.33],
[3, 8680.56, 8333.34, 347.22, 75000.00],
[4, 8645.83, 8333.34, 312.50, 66666.67],
[5, 8611.11, 8333.34, 277.78, 58333.33],
[6, 8576.39, 8333.34, 243.06, 50000.00],
[7, 8541.67, 8333.34, 208.33, 41666.67],
[8, 8506.94, 8333.34, 173.61, 33333.33],
[9, 8472.22, 8333.34, 138.89, 25000.00],
[10, 8437.50, 8333.34, 104.17, 16666.67],
[11, 8402.78, 8333.34, 69.44, 8333.33],
[12, 8368.06, 8333.34, 34.72, 0.00],
["Total", 102708.33, 100000.00, 2708.33]
];
let App = Vue.extend({
name: "app",
data: function() {
return {
rowIndex: 0,
columnIndex: 0,
backgroundColor: '',
actualBackgroundColor: ''
};
},
methods: {
initSpread(spread) {
const sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.name("Basic Usage");
const cellStyle = new spreadNS.Style();
cellStyle.backColor = "#f7a711";
const rowStyle = new spreadNS.Style();
rowStyle.backColor = "#82bc00";
const columnStyle = new spreadNS.Style();
columnStyle.backColor = "#cccccc";
sheet.setText(4, 4, 'cell style', spreadNS.SheetArea.viewport);
sheet.setStyle(4, 4, cellStyle, spreadNS.SheetArea.viewport);
sheet.setStyle(4, -1, rowStyle, spreadNS.SheetArea.viewport);
sheet.setStyle(9, -1, rowStyle, spreadNS.SheetArea.viewport);
sheet.setStyle(-1, 4, columnStyle, spreadNS.SheetArea.viewport);
sheet.setStyle(-1, 6, columnStyle, spreadNS.SheetArea.viewport);
cellStyle.name = 'style1';
rowStyle.name = 'style2';
columnStyle.name = 'style3';
sheet.addNamedStyle(cellStyle);
sheet.addNamedStyle(rowStyle);
sheet.addNamedStyle(columnStyle);
sheet.setText(1, 0, 'style1', spreadNS.SheetArea.viewport);
sheet.setStyle(1, 0, sheet.getNamedStyle('style1'), spreadNS.SheetArea.viewport);
sheet.setText(1, 1, 'style2', spreadNS.SheetArea.viewport);
sheet.setStyle(1, 1, sheet.getNamedStyle('style2'), spreadNS.SheetArea.viewport);
sheet.setText(1, 2, 'style3', spreadNS.SheetArea.viewport);
sheet.setStyle(1, 2, sheet.getNamedStyle('style3'), spreadNS.SheetArea.viewport);
const style5 = new spreadNS.Style();
style5.backColor = "red";
style5.isVerticalText = 'true';
style5.textIndent = 5;
const style6 = new spreadNS.Style();
style6.backColor = "green";
style6.isVerticalText = 'true';
style6.wordWrap = 'true';
const style7 = new spreadNS.Style();
style7.backColor = "yellow";
style7.isVerticalText = 'true';
style7.shrinkToFit = 'true';
sheet.resumePaint();
sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, (eventName, args) => {
const { row: rowIndex, col: columnIndex } = args.newSelections[0];
const style = sheet.getStyle(rowIndex, columnIndex);
const actualStyle = sheet.getActualStyle(rowIndex, columnIndex);
this.rowIndex = rowIndex;
this.columnIndex = columnIndex;
this.backgroundColor = this.getStyleColor(style);
this.actualBackgroundColor = this.getStyleColor(actualStyle);
});
let sheet1 = spread.getSheet(1);
sheet1.suspendPaint();
sheet1.name("Loan");
sheet1.setColumnCount(5);
for (let i = 1; i < 5; i++) {
sheet1.setColumnWidth(i, 100);
}
sheet1.setValue(0, 0, "Principal: $100,000.00");
sheet1.setValue(1, 0, "Interest rate: 5.00%");
sheet1.setValue(2, 0, "Payment interval: Monthly");
sheet1.setValue(3, 0, "Number of payments: 12");
sheet1.setArray(5, 0, data);
let summaryStyle = new GC.Spread.Sheets.Style();
summaryStyle.backColor = "#D9EAD3";
sheet1.getRange(0, 0, 4, 3).setStyle(summaryStyle);
let headStyle = new GC.Spread.Sheets.Style();
headStyle.font = "bold 12px sans-serif";
headStyle.backColor = "#cccccc";
let contentStyle = new GC.Spread.Sheets.Style();
contentStyle.backColor = "#81b100";
sheet1.getRange("A6:E6").setStyle(headStyle);
sheet1.getRange(5, 0, 14, 5).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
for (let r = 6; r < 18; r++) {
if (r % 2 == 0) {
sheet1.setStyle(r, -1, contentStyle);
}
}
let currencyStyle = new GC.Spread.Sheets.Style();
currencyStyle.formatter = "[$$-409]#,##0.00";
currencyStyle.name = "currency";
sheet1.addNamedStyle(currencyStyle);
sheet1.getRange(6, 1, 13, 4).setStyleName("currency");
sheet1.getRange(18, 0, 1, 5).font("bold 12px sans-serif");
sheet1.resumePaint();
sheet1.bind(GC.Spread.Sheets.Events.SelectionChanged, (eventName, args) => {
const { row: rowIndex, col: columnIndex } = args.newSelections[0];
const style = sheet1.getStyle(rowIndex, columnIndex);
const actualStyle = sheet1.getActualStyle(rowIndex, columnIndex);
this.rowIndex = rowIndex;
this.columnIndex = columnIndex;
this.backgroundColor = this.getStyleColor(style);
this.actualBackgroundColor = this.getStyleColor(actualStyle);
});
},
getStyleColor(style) {
let color = '';
if (style && style.backColor) {
color = style.backColor;
}
return color;
}
},
computed: {
datasource: () => {
return getData();
}
}
});
new Vue({
render: h => h(App)
}).$mount("#app");
</script>
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/vue/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/zh/vue/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app.vue');
System.import('$DEMOROOT$/zh/lib/vue/license.js');
</script>
</head>
<body>
<div id="app"></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;
overflow: auto;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
}
.sample-options{
z-index: 1000;
}
.option {
padding-bottom: 6px;
}
.checkbox {
padding-right: 12px;
display: inline-block;
}
label {
display: inline-block;
min-width: 100px;
}
input, select {
width: 100%;
padding: 4px 0;
margin-top: 4px;
box-sizing: border-box;
}
input[type=checkbox] {
width: auto;
padding: 0;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(function(global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' },
'*.vue': { loader: 'vue-loader' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@grapecity-software/spread-sheets': 'npm:@grapecity-software/spread-sheets/index.js',
'@grapecity-software/spread-sheets-resources-zh': 'npm:@grapecity-software/spread-sheets-resources-zh/index.js',
'@grapecity-software/spread-sheets-vue': 'npm:@grapecity-software/spread-sheets-vue/index.js',
'@grapecity-software/jsob-test-dependency-package/react-components': 'npm:@grapecity-software/jsob-test-dependency-package/react-components/index.js',
'jszip': 'npm:jszip/dist/jszip.js',
'css': 'npm:systemjs-plugin-css/css.js',
'vue': 'npm:vue/dist/vue.min.js',
'vue-loader': 'npm:systemjs-vue-browser/index.js',
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
}
}
});
})(this);
