行と列の状態

行の状態と列の状態は、セルの状態を拡張したもので、行全体や列全体の状態を与えます。

行または列の方向に8種類の状態をサポートしており、このデモではそれぞれのシートで試すことができます。 状態 ホバー状態 Hover row: 行の上にカーソルを置いた状態です Hover column: 列の上にカーソルを置いた状態です 無効な状態 Invalid row: 1つのセルが無効なとき、その行は無効な状態です Invalid column: 1つのセルが無効なとき、その列は無効な状態です 編集状態 Edit row: セルを編集すると、その行は編集状態になる Edit column: セルを編集すると、その列は編集状態になる アクティブ状態 Active row: アクティブな行 Active column: アクティブな列 選択の状態 Selected row: あるセルが選択されると、その行は選択状態になる Selected column: あるセルが選択されると、その列は選択状態になる 変更の状態(Dirty) Dirty row: 1つのセルがDirtyなとき、その行はDirtyな状態になる Dirty column: 1つのセルがDirtyなとき、その列はDirtyな状態になる 挿入状態 Inserted row: 挿入された行 これらは 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(7); initHoverStateSheet(spread); initEditStateSheet(spread); initActiveStateSheet(spread); initSelectedStateSheet(spread); initDirtyStateSheet(spread); initInsertedStateSheet(spread); initInvalidStateSheet(spread); } function initHoverStateSheet(spread) { var sheet = spread.getSheet(0); sheet.name("hover"); var description = "マウスカーソルを表のセルに合わせてください。"; 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("行の向き").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, [rowRange]); sheet.getCell(columnRange.row - 2, columnRange.col).value("列の向き").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("両方の向き").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 = "表のセルをダブルクリックするか、直接何かを入力して編集します。"; 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("行の向き").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("列の向き").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("両方の向き").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 = "表のセルをフォーカスしてアクティブにします。"; 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("行の向き").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("列の向き").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("両方の向き").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 = "表のセルを選択します。Ctrlキーを使って複数選択または選択解除することもできます。"; 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("行の向き").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("列の向き").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("両方の向き").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 = "表のセルの値を編集したり、行を挿入して更新します。"; 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("行の向き").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("列の向き").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("両方の向き").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 = "行を挿入します。列の挿入には対応しません。"; 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("行の向き").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("列の向き").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("両方の向き").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 = "表のセルの値を編集すると無効化します。"; 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("行の向き(バリデータは'Country'列にあります)").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("列の向き(バリデータは'ShipVia'列にあります。有効な数値は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("両方の向き(バリデータは'UnitsInStock'列にあります。有効な数値は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(); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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; }