SpreadJS는 다음 셀 상태를 지원합니다.
유형
메모
hover
마우스로 셀을 가리킵니다.
invalid
데이터 유효성 검사에 실패했습니다.
readonly
셀이 잠겨 있습니다.
edit
셀이 편집 중입니다.
active
셀에 포커스가 있습니다.
selected
셀이 선택 범위에 있습니다.
dirty
셀 값이 변경되었습니다.
invalid formula
셀 값이 잘못된 수식 문자열입니다.
스타일 설정 예시는 다음과 같습니다.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet :autoGenerateColumns="autoGenerateColumns" />
<gc-worksheet :autoGenerateColumns="autoGenerateColumns" />
</gc-spread-sheets>
</div>
</template>
<script setup>
import { ref } from 'vue';
import '@mescius/spread-sheets-vue';
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-resources-ko';
GC.Spread.Common.CultureManager.culture("ko-kr");
const autoGenerateColumns = ref(true);
const spread = ref(null);
const initSpread = (spreadInstance) => {
spread.value = spreadInstance;
spread.value.suspendPaint();
const sheet = spread.value.getSheet(0);
spread.value.options.backColor = "#fefce3";
spread.value.options.grayAreaBackColor = "#fefce3";
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
sheet.options.selectionBorderColor = "transparent";
sheet.defaults.rowHeight = 60;
sheet.defaults.colWidth = 90;
sheet.setColumnCount(10);
sheet.options.rowHeaderVisible = false;
sheet.options.colHeaderVisible = false;
const style = sheet.getDefaultStyle();
style.font = "20px Segoe UI";
style.vAlign = GC.Spread.Sheets.VerticalAlign.top;
style.labelOptions = {
alignment: GC.Spread.Sheets.LabelAlignment.leftTop,
visibility: GC.Spread.Sheets.LabelVisibility.visible,
font: 'normal 14px/normal "nimbus-sans"',
foreColor: "#333333",
margin: "3px 0px 0px 10px"
};
style.cellPadding = "25px 0px 0px 0px";
sheet.setValue(0, 0, "Add to inventory");
sheet.getCell(0, 0).font("bold normal 25px normal");
sheet.getRange(0, 0, 1, 10).setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thick), { bottom: true });
sheet.getRange(1, 0, 5, 10).borderBottom(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin));
sheet.getCell(1, 0).watermark("PRODUCT NAME");
sheet.getRange(1, 0, 1, 7).borderRight(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin));
sheet.addSpan(1, 0, 1, 7);
sheet.addSpan(1, 7, 1, 3);
sheet.getCell(1, 7).watermark("TAGS");
sheet.getRange(2, 0, 1, 5).borderRight(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin));
const vendorCombo = new GC.Spread.Sheets.CellTypes.ComboBox();
const vendorList = [
"Select a vendor", "ted", "Magna Phasellus Dolor Incorporated", "Fames Ac Turpis Inc.", "Eu Eros Institute", "Suspendisse Sagittis Associates", "Tempor Lorem PC", "Nulla Facilisi Sed PC", "Dignissim Corp.", "Blandit Ltd", "Dapibus Gravida Aliquam LLP", "Cursus A Inc.", "Tellus PC", "Fusce Mi Foundation", "Dictum Sapien Aenean Associates", "In Tincidunt PC", "Sapien Aenean Ltd", "Libero Foundation", "Egestas Rhoncus Proin Corp.", "Feugiat Nec Diam Institute", "Turpis Foundation", "Pede Malesuada Vel Associates", "Eget Venenatis A PC", "Mollis Vitae Corporation", "Gravida Mauris Incorporated", "Tortor Consulting", "Habitant Morbi Tristique Corporation", "Enim Corp.", "Sed Turpis Nec LLC", "Enim Foundation", "Tincidunt Orci Quis Institute", "Lectus Pede LLC", "Class Corporation", "Erat Volutpat Nulla LLP", "Sed LLC", "Justo Faucibus Associates", "Vel Turpis Foundation", "Tellus Aenean Limited", "Tempus Scelerisque Corporation", "Eleifend LLP", "A Felis Ullamcorper Company", "Neque Non LLC", "Nibh Donec Est PC"
];
vendorCombo.items(vendorList);
vendorCombo.maxDropDownItems(10);
vendorCombo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text);
sheet.getCell(2, 0, GC.Spread.Sheets.SheetArea.viewport).watermark("VENDOR").cellType(vendorCombo).value("Select a vendor").font("15px Segoe UI").textIndent(1.25);
sheet.addSpan(2, 0, 1, 5);
const productList = [
"Select a product type", "et magnis", "Vivamus rhoncus.", "egestas ligula.", "nulla. Cras", "Proin mi.", "turpis non", "ante ipsum", "arcu. Curabitur", "ante. Maecenas", "magna. Phasellus", "Suspendisse aliquet,", "purus gravida", "ac risus.", "mollis non,"
];
const productCombo = new GC.Spread.Sheets.CellTypes.ComboBox();
productCombo.items(productList);
productCombo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text);
sheet.getCell(2, 5).watermark("PRODUCT TYPE").cellType(productCombo).value("Select a product type").font("15px Segoe UI").textIndent(1.25);
sheet.addSpan(2, 5, 1, 5);
sheet.addSpan(3, 0, 1, 10);
sheet.getCell(3, 0).watermark("PRODUCT DESCRIPTION");
sheet.getRange(4, 0, 1, 8).borderRight(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin));
sheet.getCell(4, 0).watermark("SKU");
sheet.addSpan(4, 0, 1, 2);
sheet.getCell(4, 2).watermark("INITIAL STOCK LEVEL");
sheet.addSpan(4, 2, 1, 2);
sheet.addSpan(4, 4, 1, 2);
sheet.addSpan(4, 6, 1, 2);
sheet.addSpan(4, 8, 1, 2);
sheet.getCell(4, 4).watermark("COST PRICE");
sheet.getCell(4, 6).watermark("WHOLESALE PRICE");
sheet.getCell(4, 8).watermark("RETAIL PRICE");
sheet.getRange(5, 0, 1, 5).borderRight(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin));
sheet.getCell(5, 0).watermark("COUNTRY");
sheet.addSpan(5, 0, 1, 5);
sheet.getCell(5, 5).watermark("CITY");
sheet.addSpan(5, 5, 1, 5);
const hoverStyle = new GC.Spread.Sheets.Style();
hoverStyle.backColor = 'white';
const range = new GC.Spread.Sheets.Range(1, 0, 5, 10);
sheet.cellStates.add(range, GC.Spread.Sheets.CellStatesType.hover, hoverStyle);
spread.value.resumePaint();
};
</script>
<style scoped>
#app {
height: 100%;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
.options-container legend {
text-align: center;
}
.option-row {
font-size: 14px;
padding: 5px;
}
input {
display: block;
width: 100%;
margin: 8px 0;
box-sizing: border-box;
}
label,
input {
padding: 4px 6px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#drawUnderline {
display: inline-block;
width: 30px;
}
#drawUnderlineLabel {
display: inline-block;
}
#allowAutoCreateHyperlink {
display: inline-block;
width: 30px;
}
#setHyperlinkButton {
font-weight: bold;
background-color: #ecf3ff;
width: 200px;
height: 35px;
border-radius: 4px;
border-color: #0b93d5;
border-width: thin;
}
#settingsDiv {
margin-top: "10px"
}
#settingString {
padding: "2px 10px"
}
#allowAutoCreateHyperlinkDiv {
margin-top: "10px"
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script src="compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/ko/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.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",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-ko': 'npm:@mescius/spread-sheets-resources-ko/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
