GrapeCity는 행 또는 열 방향으로 7가지 종류의 상태를 지원하므로, 이 데모에서 서로 다른 시트에 시험해 볼 수 있습니다.
상태
마우스로 가리키기 상태
Hover row: 행 위에 마우스 커서 놓기
Hover column: 열 위에 마우스 커서 놓기
잘못된 상태
Invalid row: 한 셀이 유효하지 않으면 그 행은 잘못된 상태입니다.
Invalid column: 한 셀이 유효하지 않으면 그 열은 잘못된 상태입니다.
편집 상태
Edit row: 셀을 편집할 때 그 행은 편집 상태입니다.
Edit column: 셀을 편집할 때 그 열은 편집 상태입니다.
활성 상태
Active row: 활성 상태인 행
Active column: 활성 상태인 열
선택된 상태
Selected row: 한 셀이 선택되면 그 행은 선택된 상태입니다.
Selected column: 한 셀이 선택되면 그 열은 선택된 상태입니다.
더티 상태
Dirty row: 한 셀이 더티이면 그 행은 더티 상태입니다.
Dirty column: 한 셀이 더티이면 그 열은 더티 상태입니다.
삽입된 상태
Inserted row: 삽입된 상태인 행
잘못된 수식
Invalid Formula row: 셀 하나가 Invalid Formula이면 해당 셀의 행은 Invalid Formula 상태입니다.
Invalid Formula column: 셀 하나가 Invalid Formula이면 해당 셀의 열은 Invalid Formula 상태입니다.
이러한 행은 GC.Spread.Sheets.RowColumnStates에서 찾을 수 있습니다.
추가 상태 규칙
행 상태와 열 상태는 조건부 서식을 기반으로 하므로 addRowStateRule 또는 addColumnStateRule을 사용할 수 있습니다.
또는 새 StateRule을 만든 후 addRule을 사용할 수도 있습니다. 다음은 동일한 샘플 코드입니다.
다중 범위를 위한 다중 스타일
다중 범위에 다중 스타일을 설정할 수 있습니다.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbook-initialized="initSpread">
<gc-worksheet></gc-worksheet>
</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 suppliersData = [
["Id", "ContactName", "CompanyName", "Country", "phone"],
[4, "Yoshi Nagase", "Tokyo Traders", "Japan", "(03) 3555-5011"],
[5, "Antonio del Valle Saavedra", "Cooperativa de Quesos 'Las Cabras'", "Spain", "(98) 598 76 54"],
[6, "Mayumi Ohno", "Mayumi's", "Japan", "(06) 431-7877"],
[7, "Ian Devling", "Pavlova Ltd.", "Australia", "(03) 444-2343"],
[8, "Peter Wilson", "Specialty Biscuits Ltd.", "UK", "(161) 555-4448"],
[9, "Lars Peterson", "PB Knäckebröd AB", "Sweden", "031-987 65 43"],
[10, "Carlos Diaz", "Refrescos Americanas LTDA", "Brazil", "(11) 555 4640"],
[11, "Petra Winkler", "Heli Süßwaren GmbH & Co. KG", "Germany", "(010) 9984510"],
[2, "Shelley Burke", "New Orleans Cajun Delights", "USA", "(100) 555-4822"]
];
const ordersData = [
["Id", "CustomerId", "ShipVia", "shipName", "Freight"],
[10271, "SPLIR", 2, "Split Rail Beer & Ale", 4.54],
[10266, "WARTH", 3, "Wartian Herkku", 25.73],
[10279, "LEHMS", 2, "Lehmanns Marktstand", 25.83],
[10292, "TRADH", 2, "Tradiçao Hipermercados", 1.35],
[10295, "VINET", 2, "Vins et alcools Chevalier", 1.15],
[10313, "QUICK", 2, "QUICK-Stop", 1.96],
[10317, "LONEP", 1, "Lonesome Pine Restaurant", 12.69],
[10322, "PERIC", 3, "Pericles Comidas clásicas", 0.4],
[10320, "WARTH", 3, "Wartian Herkku", 34.57]
];
const productsData = [
["Id", "UnitPrice", "ProductName", "UnitsInStock", "QuantityPerUnit", "Discontinued"],
[4, 22, "Chef Anton's Cajun Seasoning", 53, "48 - 6 oz jars", true],
[5, 21.35, "Chef Anton's Gumbo Mix", 0, "36 boxes", true],
[6, 25, "Grandma's Boysenberry Spread", 120, "12 - 8 oz jars", false],
[7, 30, "Uncle Bob's Organic Dried Pears", 15, "12 - 1 lb pkgs.", false],
[8, 40, "Northwoods Cranberry Sauce", 6, "12 - 12 oz jars", false],
[9, 97, "Mishi Kobe Niku", 29, "18 - 500 g pkgs.", true],
[10, 31, "Ikura", 31, "12 - 200 ml jars", false],
[2, 19, "Chang", 17, "24 - 12 oz bottles", false],
[3, 10, "Aniseed Syrup", 13, "12 - 550 ml bottles", false],
[11, 21, "Queso Cabrales 2", 22, "1 kg pkg.", false],
[12, 38, "Queso Manchego La Pastora", 86, "10 - 500 g pkgs.", false],
[13, 6, "Konbu", 24, "2 kg box", false],
[14, 23.25, "Tofu", 35, "40 - 100 g pkgs.", false],
[15, 15.5, "Genen Shouyu", 39, "24 - 250 ml bottles", false],
[1, 18, "Chai", 39, "10 boxes x 20 bags", false],
[16, 17.45, "Pavlova", 29, "32 - 500 g boxes", false],
[17, 39, "Alice Mutton", 0, "20 - 1 kg tins", true],
[18, 62.5, "Carnarvon Tigers", 42, "16 kg pkg.", false],
[19, 9.2, "Teatime Chocolate Biscuits", 25, "10 boxes x 12 pieces", false],
[20, 81, "Sir Rodney's Marmalade", 40, "30 gift boxes", false],
[24, 4.5, "Guaraná Fantástica", 20, "12 - 355 ml cans", true]
];
const spread = ref(null);
const initSpread = (spreadInstance) => {
spread.value = spreadInstance;
spreadInstance.setSheetCount(8);
initHoverStateSheet(spreadInstance);
initEditStateSheet(spreadInstance);
initActiveStateSheet(spreadInstance);
initSelectedStateSheet(spreadInstance);
initDirtyStateSheet(spreadInstance);
initInsertedStateSheet(spreadInstance);
initInvalidStateSheet(spreadInstance);
initInvalidFormulaStateSheet(spreadInstance);
};
const initHoverStateSheet = (spread) => {
const sheet = spread.getSheet(0);
sheet.name("hover");
const description = "Use you mouse to hover the table cells.";
const cfs = sheet.conditionalFormats;
const style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
const style1 = new GC.Spread.Sheets.Style("rgb(240, 67, 54)", "rgb(255, 255, 255)");
const rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
const columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
const bothRange = new GC.Spread.Sheets.Range(4, 7, 21, 6);
sheet.suspendPaint();
sheet.getCell(1, 1).value(description).foreColor("red");
sheet.getCell(rowRange.row - 2, rowRange.col).value("Row Direction").font("bold 14.6667px Calibri");
sheet.tables.add("rowTable0", rowRange.row - 1, rowRange.col, rowRange.rowCount + 1, rowRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(rowRange.row - 1, rowRange.col, suppliersData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.hover, [style, style1, style], [new GC.Spread.Sheets.Range(4, 1, 9, 2), new GC.Spread.Sheets.Range(4, 3, 9, 1), new GC.Spread.Sheets.Range(4, 4, 9, 2)]);
sheet.getCell(columnRange.row - 2, columnRange.col).value("Column Direction").font("bold 14.6667px Calibri");
sheet.tables.add("columnTable1", columnRange.row - 1, columnRange.col, columnRange.rowCount + 1, columnRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(columnRange.row - 1, columnRange.col, ordersData);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.hover, style, [columnRange]);
sheet.getCell(bothRange.row - 2, bothRange.col).value("Both Direction").font("bold 14.6667px Calibri");
sheet.tables.add("bothTable2", bothRange.row - 1, bothRange.col, bothRange.rowCount + 1, bothRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(bothRange.row - 1, bothRange.col, productsData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.hover, style, [bothRange]);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.hover, style, [bothRange]);
sheet.autoFitColumn(2);
sheet.autoFitColumn(3);
sheet.autoFitColumn(4);
sheet.autoFitColumn(5);
sheet.autoFitColumn(9);
sheet.autoFitColumn(11);
sheet.autoFitColumn(12);
sheet.resumePaint();
};
const initEditStateSheet = (spread) => {
const sheet = spread.getSheet(1);
sheet.name("edit");
const description = "Double click the table cells or input something directly to edit it.";
const cfs = sheet.conditionalFormats;
const style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
const rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
const columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
const bothRange = new GC.Spread.Sheets.Range(4, 7, 21, 6);
sheet.suspendPaint();
sheet.getCell(1, 1).value(description).foreColor("red");
sheet.getCell(rowRange.row - 2, rowRange.col).value("Row Direction").font("bold 14.6667px Calibri");
sheet.tables.add("rowTable3", rowRange.row - 1, rowRange.col, rowRange.rowCount + 1, rowRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(rowRange.row - 1, rowRange.col, suppliersData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.edit, style, [rowRange]);
sheet.getCell(columnRange.row - 2, columnRange.col).value("Column Direction").font("bold 14.6667px Calibri");
sheet.tables.add("columnTable4", columnRange.row - 1, columnRange.col, columnRange.rowCount + 1, columnRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(columnRange.row - 1, columnRange.col, ordersData);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.edit, style, [columnRange]);
sheet.getCell(bothRange.row - 2, bothRange.col).value("Both Direction").font("bold 14.6667px Calibri");
sheet.tables.add("bothTable5", bothRange.row - 1, bothRange.col, bothRange.rowCount + 1, bothRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(bothRange.row - 1, bothRange.col, productsData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.edit, style, [bothRange]);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.edit, style, [bothRange]);
sheet.autoFitColumn(2);
sheet.autoFitColumn(3);
sheet.autoFitColumn(4);
sheet.autoFitColumn(5);
sheet.autoFitColumn(9);
sheet.autoFitColumn(11);
sheet.autoFitColumn(12);
sheet.resumePaint();
};
const initActiveStateSheet = (spread) => {
const sheet = spread.getSheet(2);
sheet.name("active");
const description = "Focus table cells to active it.";
const cfs = sheet.conditionalFormats;
const style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
const rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
const columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
const bothRange = new GC.Spread.Sheets.Range(4, 7, 21, 6);
sheet.suspendPaint();
sheet.getCell(1, 1).value(description).foreColor("red");
sheet.getCell(rowRange.row - 2, rowRange.col).value("Row Direction").font("bold 14.6667px Calibri");
sheet.tables.add("rowTable6", rowRange.row - 1, rowRange.col, rowRange.rowCount + 1, rowRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(rowRange.row - 1, rowRange.col, suppliersData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.active, style, [rowRange]);
sheet.getCell(columnRange.row - 2, columnRange.col).value("Column Direction").font("bold 14.6667px Calibri");
sheet.tables.add("columnTable7", columnRange.row - 1, columnRange.col, columnRange.rowCount + 1, columnRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(columnRange.row - 1, columnRange.col, ordersData);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.active, style, [columnRange]);
sheet.getCell(bothRange.row - 2, bothRange.col).value("Both Direction").font("bold 14.6667px Calibri");
sheet.tables.add("bothTable8", bothRange.row - 1, bothRange.col, bothRange.rowCount + 1, bothRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(bothRange.row - 1, bothRange.col, productsData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.active, style, [bothRange]);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.active, style, [bothRange]);
sheet.autoFitColumn(2);
sheet.autoFitColumn(3);
sheet.autoFitColumn(4);
sheet.autoFitColumn(5);
sheet.autoFitColumn(9);
sheet.autoFitColumn(11);
sheet.autoFitColumn(12);
sheet.resumePaint();
};
const initSelectedStateSheet = (spread) => {
const sheet = spread.getSheet(3);
sheet.name("selected");
const description = "Select table cells, you could also use ctrl to multiple select or deselect.";
const cfs = sheet.conditionalFormats;
const style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
const rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
const columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
const bothRange = new GC.Spread.Sheets.Range(4, 7, 21, 6);
sheet.suspendPaint();
sheet.getCell(1, 1).value(description).foreColor("red");
sheet.getCell(rowRange.row - 2, rowRange.col).value("Row Direction").font("bold 14.6667px Calibri");
sheet.tables.add("rowTable9", rowRange.row - 1, rowRange.col, rowRange.rowCount + 1, rowRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(rowRange.row - 1, rowRange.col, suppliersData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.selected, style, [rowRange]);
sheet.getCell(columnRange.row - 2, columnRange.col).value("Column Direction").font("bold 14.6667px Calibri");
sheet.tables.add("columnTable10", columnRange.row - 1, columnRange.col, columnRange.rowCount + 1, columnRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(columnRange.row - 1, columnRange.col, ordersData);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.selected, style, [columnRange]);
sheet.getCell(bothRange.row - 2, bothRange.col).value("Both Direction").font("bold 14.6667px Calibri");
sheet.tables.add("bothTable11", bothRange.row - 1, bothRange.col, bothRange.rowCount + 1, bothRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(bothRange.row - 1, bothRange.col, productsData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.selected, style, [bothRange]);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.selected, style, [bothRange]);
sheet.autoFitColumn(2);
sheet.autoFitColumn(3);
sheet.autoFitColumn(4);
sheet.autoFitColumn(5);
sheet.autoFitColumn(9);
sheet.autoFitColumn(11);
sheet.autoFitColumn(12);
sheet.resumePaint();
};
const initDirtyStateSheet = (spread) => {
const sheet = spread.getSheet(4);
sheet.name("dirty");
const description = "Edit table cells value or insert rows to make them dirty.";
const cfs = sheet.conditionalFormats;
const style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
const rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
const columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
const bothRange = new GC.Spread.Sheets.Range(4, 7, 21, 6);
sheet.suspendPaint();
sheet.getCell(1, 1).value(description).foreColor("red");
sheet.getCell(rowRange.row - 2, rowRange.col).value("Row Direction").font("bold 14.6667px Calibri")
sheet.tables.add("rowTable12", rowRange.row - 1, rowRange.col, rowRange.rowCount + 1, rowRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(rowRange.row - 1, rowRange.col, suppliersData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.dirty, style, [rowRange]);
sheet.getCell(columnRange.row - 2, columnRange.col).value("Column Direction").font("bold 14.6667px Calibri")
sheet.tables.add("columnTable13", columnRange.row - 1, columnRange.col, columnRange.rowCount + 1, columnRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(columnRange.row - 1, columnRange.col, ordersData);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.dirty, style, [columnRange]);
sheet.getCell(bothRange.row - 2, bothRange.col).value("Both Direction").font("bold 14.6667px Calibri")
sheet.tables.add("bothTable14", bothRange.row - 1, bothRange.col, bothRange.rowCount + 1, bothRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(bothRange.row - 1, bothRange.col, productsData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.dirty, style, [bothRange]);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.dirty, style, [bothRange]);
sheet.autoFitColumn(2);
sheet.autoFitColumn(3);
sheet.autoFitColumn(4);
sheet.autoFitColumn(5);
sheet.autoFitColumn(9);
sheet.autoFitColumn(11);
sheet.autoFitColumn(12);
sheet.clearPendingChanges();
sheet.resumePaint();
};
const initInsertedStateSheet = (spread) => {
const sheet = spread.getSheet(5);
sheet.name("inserted");
const description = "Insert rows, not support the inserted column.";
const cfs = sheet.conditionalFormats;
const style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
const rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
const columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
const bothRange = new GC.Spread.Sheets.Range(4, 7, 21, 6);
sheet.suspendPaint();
sheet.getCell(1, 1).value(description).foreColor("red");
sheet.getCell(rowRange.row - 2, rowRange.col).value("Row Direction").font("bold 14.6667px Calibri")
sheet.tables.add("rowTable15", rowRange.row - 1, rowRange.col, rowRange.rowCount + 1, rowRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(rowRange.row - 1, rowRange.col, suppliersData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.inserted, style, [rowRange]);
sheet.getCell(columnRange.row - 2, columnRange.col).value("Column Direction").font("bold 14.6667px Calibri")
sheet.tables.add("columnTable16", columnRange.row - 1, columnRange.col, columnRange.rowCount + 1, columnRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(columnRange.row - 1, columnRange.col, ordersData);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.inserted, style, [columnRange]);
sheet.getCell(bothRange.row - 2, bothRange.col).value("Both Direction").font("bold 14.6667px Calibri")
sheet.tables.add("bothTable17", bothRange.row - 1, bothRange.col, bothRange.rowCount + 1, bothRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(bothRange.row - 1, bothRange.col, productsData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.inserted, style, [bothRange]);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.inserted, style, [bothRange]);
sheet.autoFitColumn(2);
sheet.autoFitColumn(3);
sheet.autoFitColumn(4);
sheet.autoFitColumn(5);
sheet.autoFitColumn(9);
sheet.autoFitColumn(11);
sheet.autoFitColumn(12);
sheet.clearPendingChanges();
sheet.resumePaint();
};
const initInvalidStateSheet = (spread) => {
spread.options.highlightInvalidData = true;
const sheet = spread.getSheet(6);
sheet.name("invalid");
const description = "Edit table cells value to make them invalid.";
const cfs = sheet.conditionalFormats;
const style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
const rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
const columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
const bothRange = new GC.Spread.Sheets.Range(4, 7, 21, 6);
sheet.suspendPaint();
const dv1 = new GC.Spread.Sheets.DataValidation.createListValidator('Japan, Spain, Australia, UK, Sweden, Brazil, Germany, USA');
dv1.inputTitle('Please choose a country:');
sheet.setDataValidator(rowRange.row, 4, rowRange.rowCount, 1, dv1);
const dv2 = new GC.Spread.Sheets.DataValidation.createNumberValidator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.between, 1, 3);
sheet.setDataValidator(columnRange.row, 3, columnRange.rowCount, 1, dv2);
const dv3 = new GC.Spread.Sheets.DataValidation.createNumberValidator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.between, 0, 120);
sheet.setDataValidator(bothRange.row, 10, bothRange.rowCount, 1, dv3);
sheet.getCell(1, 1).value(description).foreColor("red");
sheet.getCell(rowRange.row - 2, rowRange.col).value("Row Direction(The validator is at the 'Country' column.)").font("bold 14.6667px Calibri")
sheet.tables.add("rowTable18", rowRange.row - 1, rowRange.col, rowRange.rowCount + 1, rowRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(rowRange.row - 1, rowRange.col, suppliersData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.invalid, style, [rowRange]);
sheet.getCell(columnRange.row - 2, columnRange.col).value("Column Direction(The validator is at the 'ShipVia' column. The valid number is between 1 ~ 3)").font("bold 14.6667px Calibri")
sheet.tables.add("columnTable19", columnRange.row - 1, columnRange.col, columnRange.rowCount + 1, columnRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(columnRange.row - 1, columnRange.col, ordersData);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.invalid, style, [columnRange]);
sheet.getCell(bothRange.row - 2, bothRange.col).value("Both Direction(The validator is at the 'UnitsInStock' column. The valid number is between 0 ~ 120)").font("bold 14.6667px Calibri")
sheet.tables.add("bothTable20", bothRange.row - 1, bothRange.col, bothRange.rowCount + 1, bothRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(bothRange.row - 1, bothRange.col, productsData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.invalid, style, [bothRange]);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.invalid, style, [bothRange]);
sheet.autoFitColumn(2);
sheet.autoFitColumn(3);
sheet.autoFitColumn(4);
sheet.autoFitColumn(5);
sheet.autoFitColumn(9);
sheet.autoFitColumn(11);
sheet.autoFitColumn(12);
sheet.resumePaint();
};
const initInvalidFormulaStateSheet = (spread) => {
spread.options.allowInvalidFormula = true;
const sheet = spread.getSheet(7);
sheet.name("invalid formula");
const description = "Edit table cells value to invalid formula, such as '=SUM()'.";
const cfs = sheet.conditionalFormats;
const style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
const rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
const columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
const bothRange = new GC.Spread.Sheets.Range(4, 7, 21, 6);
sheet.suspendPaint();
sheet.getCell(1, 1).value(description).foreColor("red");
sheet.getCell(rowRange.row - 2, rowRange.col).value("Row Direction").font("bold 14.6667px Calibri")
sheet.tables.add("rowTable21", rowRange.row - 1, rowRange.col, rowRange.rowCount + 1, rowRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(rowRange.row - 1, rowRange.col, suppliersData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.invalidFormula, style, [rowRange]);
sheet.getCell(columnRange.row - 2, columnRange.col).value("Column Direction").font("bold 14.6667px Calibri")
sheet.tables.add("columnTable22", columnRange.row - 1, columnRange.col, columnRange.rowCount + 1, columnRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(columnRange.row - 1, columnRange.col, ordersData);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.invalidFormula, style, [columnRange]);
sheet.getCell(bothRange.row - 2, bothRange.col).value("Both Direction").font("bold 14.6667px Calibri")
sheet.tables.add("bothTable23", bothRange.row - 1, bothRange.col, bothRange.rowCount + 1, bothRange.colCount, GC.Spread.Sheets.Tables.TableThemes.light1);
sheet.setArray(bothRange.row - 1, bothRange.col, productsData);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.invalidFormula, style, [bothRange]);
cfs.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.invalidFormula, style, [bothRange]);
sheet.autoFitColumn(2);
sheet.autoFitColumn(3);
sheet.autoFitColumn(4);
sheet.autoFitColumn(5);
sheet.autoFitColumn(9);
sheet.autoFitColumn(11);
sheet.autoFitColumn(12);
sheet.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 {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.options-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
label {
display: inline-block;
margin-bottom: 6px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</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);
