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" @workbookInitialized="initSpread">
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
</div>
</template>
<script>
import Vue from "vue";
import GC from "@mescius/spread-sheets";
import '@mescius/spread-sheets-resources-ko';
GC.Spread.Common.CultureManager.culture("ko-kr");
import "@mescius/spread-sheets-vue";
import "./styles.css";
var 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"]
];
var 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]
];
var 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],
];
let App = Vue.extend({
name: "app",
data: function() {
return {
autoGenerateColumns: false,
spread: null,
dataSource: dataSource
};
},
methods:{
initSpread: function (spread) {
this.spread = spread;
spread.setSheetCount(8);
initHoverStateSheet(spread);
initEditStateSheet(spread);
initActiveStateSheet(spread);
initSelectedStateSheet(spread);
initDirtyStateSheet(spread);
initInsertedStateSheet(spread);
initInvalidStateSheet(spread);
initInvalidFormulaStateSheet(spread)
}
}
});
function initHoverStateSheet(spread) {
var sheet = spread.getSheet(0);
sheet.name("hover");
var description = "Use you mouse to hover the table cells.";
var cfs = sheet.conditionalFormats;
var style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
var style1 = new GC.Spread.Sheets.Style("rgb(240, 67, 54)", "rgb(255, 255, 255)");
var rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
var columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
var 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();
}
function initEditStateSheet(spread) {
var sheet = spread.getSheet(1);
sheet.name("edit");
var description = "Double click the table cells or input something directly to edit it.";
var cfs = sheet.conditionalFormats;
var style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
var rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
var columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
var 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();
}
function initActiveStateSheet(spread) {
var sheet = spread.getSheet(2);
sheet.name("active");
var description = "Focus table cells to active it.";
var cfs = sheet.conditionalFormats;
var style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
var rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
var columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
var 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();
}
function initSelectedStateSheet(spread) {
var sheet = spread.getSheet(3);
sheet.name("selected");
var description = "Select table cells, you could also use ctrl to multiple select or deselect.";
var cfs = sheet.conditionalFormats;
var style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
var rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
var columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
var 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();
}
function initDirtyStateSheet(spread) {
var sheet = spread.getSheet(4);
sheet.name("dirty");
var description = "Edit table cells value or insert rows to make them dirty.";
var cfs = sheet.conditionalFormats;
var style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
var rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
var columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
var 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();
}
function initInsertedStateSheet(spread) {
var sheet = spread.getSheet(5);
sheet.name("inserted");
var description = "Insert rows, not support the inserted column.";
var cfs = sheet.conditionalFormats;
var style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
var rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
var columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
var 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();
}
function initInvalidStateSheet(spread) {
spread.options.highlightInvalidData = true;
var sheet = spread.getSheet(6);
sheet.name("invalid");
var description = "Edit table cells value to make them invalid.";
var cfs = sheet.conditionalFormats;
var style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
var rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
var columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
var bothRange = new GC.Spread.Sheets.Range(4, 7, 21, 6);
sheet.suspendPaint();
var 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);
var dv2 = new GC.Spread.Sheets.DataValidation.createNumberValidator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.between, 1, 3);
sheet.setDataValidator(columnRange.row, 3, columnRange.rowCount, 1, dv2);
var 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();
}
function initInvalidFormulaStateSheet(spread) {
spread.options.allowInvalidFormula = true;
var sheet = spread.getSheet(7);
sheet.name("invalid formula");
var description = "Edit table cells value to invalid formula, such as '=SUM()'.";
var cfs = sheet.conditionalFormats;
var style = new GC.Spread.Sheets.Style("rgb(205, 228, 153)");
var rowRange = new GC.Spread.Sheets.Range(4, 1, 9, 5);
var columnRange = new GC.Spread.Sheets.Range(16, 1, 9, 5);
var 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();
}
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$/ko/vue/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/ko/vue/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app.vue');
System.import('$DEMOROOT$/ko/lib/vue/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
.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;
}
(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: {
'@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',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/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);
