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을 사용할 수도 있습니다. 다음은 동일한 샘플 코드입니다.
다중 범위를 위한 다중 스타일
다중 범위에 다중 스타일을 설정할 수 있습니다.
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
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],
];
function initSpread(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("rowTable", 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("columnTable", 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("bothTable", 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("rowTable", 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("columnTable", 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("bothTable", 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("rowTable", 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("columnTable", 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("bothTable", 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("rowTable", 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("columnTable", 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("bothTable", 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("rowTable", 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("columnTable", 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("bothTable", 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("rowTable", 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("columnTable", 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("bothTable", 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("rowTable", 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("columnTable", 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("bothTable", 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("rowTable", 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("columnTable", 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("bothTable", 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();
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="ko-kr"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.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" style="width: 100%; height: 100%"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}