イベント

Spread.Sheetsには、シート関連の多数のイベントがあります。特定のイベントの発生時に、アプリケーションで指定のアクションが実行されるように定義できます。

<p>シートイベントをバインドするには、シートの<strong>bind</strong>および<strong>unbind</strong>メソッドを使用します。すべてのイベントをバインド解除するには、<strong>unbindAll</strong>メソッドを使用します。シートのbindおよびunbindは、次の例に示すように、jqueryのbindおよびunbindと同様に処理できます。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> spread = GC.Spread.Sheets.findControl(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ss'</span>)); <span class="hljs-keyword">var</span> sheet = spread.getActiveSheet(); <span class="hljs-keyword">var</span> selectionChanged = GC.Spread.Sheets.Events.SelectionChanged; sheet.bind(selectionChanged, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e,args</span>) </span>{ <span class="hljs-comment">// Spread.Sheetsのイベント。</span> <span class="hljs-comment">// 処理を追加します。</span> }); <span class="hljs-comment">// シート上のイベントのバインディングを削除します。</span> sheet.unbind(selectionChanged); <span class="hljs-comment">// シート上のすべてのイベントのバインディングを削除します。</span> sheet.unbindAll(); </code></pre> <p>いくつかのイベントをトリガさせる可能性のあるタスクを実行する場合、シートによるこれらのイベントのトリガを阻止するには、<strong>suspendEvent</strong>メソッドを使用すると、イベントの発生を抑制できます。タスクの完了後、<strong>resumeEvent</strong>メソッドを使用すると、イベントのトリガを再開できます。次に、この例を示します。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> spread = GC.Spread.Sheets.findControl(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ss'</span>)); <span class="hljs-keyword">var</span> sheet = spread.getActiveSheet(); sheet.suspendEvent(); <span class="hljs-comment">// 処理を追加します。</span> sheet.resumeEvent(); </code></pre>
var spreadNS = GC.Spread.Sheets; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); setStatus(sheet); sheet.setValue(2, 2, "Click me and input a char with your keyboard!"); sheet.addSpan(2, 2, 1, 5); sheet.getRange(2, 2, 1, 5).setBorder(new spreadNS.LineBorder("Black", spreadNS.LineStyle.thin), { all: true }); sheet.setValue(4, 2, "Double-click the empty cell with the black border!"); sheet.addSpan(4, 2, 1, 5); sheet.addSpan(5, 2, 1, 5); sheet.getRange(5, 2, 1, 5).setBorder(new spreadNS.LineBorder("Black", spreadNS.LineStyle.thin), { all: true }); sheet.setValue(7, 2, "Double-click me!"); sheet.addSpan(7, 2, 1, 5); sheet.getRange(7, 2, 1, 5).setBorder(new spreadNS.LineBorder("Black", spreadNS.LineStyle.thin), { all: true }); sheet.setValue(9, 2, "Double-click the empty cell with the black border and click it again!"); sheet.addSpan(9, 2, 1, 7); sheet.addSpan(10, 2, 1, 5); sheet.getRange(10, 2, 1, 5).setBorder(new spreadNS.LineBorder("Black", spreadNS.LineStyle.thin), { all: true }); sheet.resumePaint(); sheet.bind(GC.Spread.Sheets.Events.ColumnChanging, function (sender, info) { //insert column if (info.propertyName === "addColumns") { _getElementById("status").innerHTML = "ColumnChanging event called!"; _getElementById("showSheetEvents").innerHTML = "ColumnChanging: addColumns(" + "column: " + info.col + ")"; } //delete column if (info.propertyName === "deleteColumns") { _getElementById("status").innerHTML = "ColumnChanging event called!"; _getElementById("showSheetEvents").innerHTML = "ColumnChanging: deleteColumns(" + "column: " + info.col + ")"; } //unhide column if (info.propertyName === "isVisible" && info.newValue === true) { _getElementById("status").innerHTML = "ColumnChanging event called!"; _getElementById("showSheetEvents").innerHTML = "ColumnChanging: unhide column(" + "column: " + info.col + ")"; } //hide column if (info.propertyName === "isVisible" && info.newValue === false) { _getElementById("status").innerHTML = "ColumnChanging event called!"; _getElementById("showSheetEvents").innerHTML = "ColumnChanging: hide column(" + "column: " + info.col + ")"; } }); sheet.bind(GC.Spread.Sheets.Events.ColumnChanged, function (sender, info) { //insert column if (info.propertyName === "addColumns") { _getElementById("status").innerHTML = "ColumnChanged event called!"; _getElementById("showSheetEvents").innerHTML = "ColumnChanged: insert column(" + "column: " + info.col + ")"; } //delete column if (info.propertyName === "deleteColumns") { _getElementById("status").innerHTML = "ColumnChanged event called!"; _getElementById("showSheetEvents").innerHTML = "ColumnChanged: deleteColumns(" + "column: " + info.col + ")"; } //unhide column if (info.propertyName === "isVisible" && info.newValue === true) { _getElementById("status").innerHTML = "ColumnChanged event called!"; _getElementById("showSheetEvents").innerHTML = "ColumnChanged: unhide column(" + "column: " + info.col + ")"; } //hide column if (info.propertyName === "isVisible" && info.newValue === false) { _getElementById("status").innerHTML = "ColumnChanged event called!"; _getElementById("showSheetEvents").innerHTML = "ColumnChanged: hide column(" + "column: " + info.col + ")"; } }); //RowChanging sheet.bind(GC.Spread.Sheets.Events.RowChanging, function (sender, info) { //insert row if (info.propertyName === "addRows") { _getElementById("status").innerHTML = "RowChanging event called!"; _getElementById("showSheetEvents").innerHTML = "RowChanging: insert row(" + "row: " + info.row + ")"; } //delete row if (info.propertyName === "deleteRows") { _getElementById("status").innerHTML = "RowChanging event called!"; _getElementById("showSheetEvents").innerHTML = "RowChanging: delete row(" + "row: " + info.row + ")"; } //unhide row if (info.propertyName === "isVisible" && info.newValue === true) { _getElementById("status").innerHTML = "RowChanging event called!"; _getElementById("showSheetEvents").innerHTML = "RowChanging: unhide row(" + "row: " + info.row + ")"; } //hide row if (info.propertyName === "isVisible" && info.newValue === false) { _getElementById("status").innerHTML = "RowChanging event called!"; _getElementById("showSheetEvents").innerHTML = "RowChanging: hide row(" + "row: " + info.row + ")"; } }); sheet.bind(GC.Spread.Sheets.Events.RowChanged, function (sender, info) { //insert row if (info.propertyName === "addRows") { _getElementById("status").innerHTML = "RowChanged event called!"; _getElementById("showSheetEvents").innerHTML = "RowChanged: insert row(" + "row: " + info.row + ")"; } //delete row if (info.propertyName === "deleteRows") { _getElementById("status").innerHTML = "RowChanged event called!"; _getElementById("showSheetEvents").innerHTML = "RowChanged: delete row(" + "row: " + info.row + ")"; } //unhide row if (info.propertyName === "isVisible" && info.newValue === true) { _getElementById("status").innerHTML = "RowChanged event called!"; _getElementById("showSheetEvents").innerHTML = "RowChanged: unhide row(" + "row: " + info.row + ")"; } //hide row if (info.propertyName === "isVisible" && info.newValue === false) { _getElementById("status").innerHTML = "RowChanged event called!"; _getElementById("showSheetEvents").innerHTML = "RowChanged: hide row(" + "row: " + info.row + ")"; } }); sheet.bind(spreadNS.Events.EditorStatusChanged, function () { setStatus(sheet); }); sheet.bind(spreadNS.Events.SelectionChanging, function (e, info) { _getElementById("status").innerHTML = "SelectionChanging event called!"; _getElementById("showSheetEvents").innerHTML = "New Selection(" + "row: " + info.newSelections[0].row + ", " + "column: " + info.newSelections[0].col + ", " + "rowCount: " + info.newSelections[0].rowCount + ", " + "columnCount: " + info.newSelections[0].colCount + ")"; }) }; function setStatus(sheet) { var statusNow = sheet.editorStatus(); if (statusNow === spreadNS.EditorStatus.ready) { _getElementById("status").innerHTML = "Editor Status: Ready!"; _getElementById("showSheetEvents").innerHTML = "Cell is not being edited."; } else if (statusNow === spreadNS.EditorStatus.enter) { _getElementById("status").innerHTML = "Editor Status: Enter!"; _getElementById("showSheetEvents").innerHTML = "Cell is being edited, you can leave the cell by pressing one of the arrow keys."; } else if (statusNow === spreadNS.EditorStatus.edit) { _getElementById("status").innerHTML = "Editor Status: Edit!"; _getElementById("showSheetEvents").innerHTML = "Cell is being edited, you can not leave the cell by pressing one of the arrow keys."; } } function _getElementById(id) { return document.getElementById(id); }
<!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" class="sample-spreadsheets"></div> <div class="options-container"> <div class="option-row"> <label style="color:rgb(226,107,29);display:inline-block;font-family:Arial, Helvetica, sans-serif;font-size: 18px;font-weight: normal;height:30px;line-height: 30px " id="status">Settings</label> </div> <div class="option-row"> <textarea id="showSheetEvents" cols="40" rows="5" style="width: 80%"></textarea> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } label { display: block; margin-bottom: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }