ナビゲーションアクション | 機能紹介 | SpreadJS（スプレッドJS）チュートリアルデモアプリケーション

この機能は特に、Spreadインスタンス上のナビゲーションに依存するビジネスロジックを実装する場合などに便利です。 <ul> <li>moveToNextCell: アクティブセルを次のセルに移動します。(Tabキーの既定アクション)</li> <li>moveToPreviousCell: アクティブセルを前のセルに移動します。(Shift + Tabキーの既定アクション)</li> <li>selectNextControl: spread.nextControlで示される特定の要素、または、設定の無い場合には自動的に検知された要素を選択します。</li> <li>selectPreviousControl: spread.previousControlで示される特定の要素、または、設定の無い場合には自動的に検知された要素を選択します。</li> <li>moveToNextCellThenControl: アクティブセルが最後の可視セルの場合は次のコントロールを選択します。それ以外の場合はアクティブセルを次のセルに移動します。</li> <li>moveToPreviousCellThenControl: アクティブセルが最初の可視セルの場合は前のコントロールを選択します。それ以外の場合はアクティブセルを前のセルに移動します。</li> </ul> 選択されるコントロールを設定するには、nextControlおよびpreviousControlメソッドを使用します。次に、例を示します。 <pre><code class="hljs js language-js"> // 次と前のコントロールを設定する。 spread.nextControl(document.getElementById('myNextControl')); spread.previousControl(document.getElementById('myPreviousControl')); // 自動検出を使用せずに、値をundefinedに設定する。 spread.nextControl(undefined); </code></pre> ナビゲーションキーと、それぞれに対応する各アクションを設定するには、registerメソッドを使用します。次に、例を示します。 <pre><code class="hljs js language-js"> // タブを設定して次のコントロールを選択する。 spread.commandManager().register('selectNextControl', GC.Spread.Sheets.Commands.selectNextControl, GC.Spread.Commands.Key.tab, false, false, false, false); // 前のコントロールを選択するにはShift + Tabを設定します。 spread.commandManager().register('selectPreviousControl', GC.Spread.Sheets.Commands.selectPreviousControl, GC.Spread.Commands.Key.tab, false, true, false, false); </code></pre> registerには、以下の引数をこの順序で指定します。 <ul> <li>name: コマンド名</li> <li>execute: コマンドを実行する関数</li> <li>key: キーのUnicode。</li> <li>ctrl: アクションが［Ctrl］キーを使用する場合はtrue。それ以外の場合はfalse。</li> <li>shift: アクションが［Shift］キーを使用する場合はtrue。それ以外の場合はfalse。</li> <li>alt: アクションが［Alt］キーを使用する場合はtrue。それ以外の場合はfalse。</li> <li>meta: アクションがコマンドキー（Macintoshの場合）または、Windowsキー（Microsoft Windowsの場合）を使用する場合はtrue。それ以外の場合はfalse。</li> </ul> Spreadがフォーカスを失ったときに選択状態を非表示にするには、hideSelectionオプションを使用します。次に、例を示します。 <pre><code class="hljs js language-js"> spread.options.hideSelection = true; </code></pre>

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.setRowCount(20);
sheet.setColumnCount(10);
sheet.addSpan(0, 0, 1, 7);
sheet.setValue(0, 0, "press the \'Tab\' or \'Shift + Tab\' key, the selction will move in accordance.");
_getElementById("preButton").addEventListener('click',_alertHandle);
_getElementById("nextButton").addEventListener('click',_alertHandle);
function _alertHandle(){
alert(this.value);
}
_getElementById("tabAction").addEventListener('change',_moveHandle);
_getElementById("shiftTabAction").addEventListener('change',_moveHandle);
function _moveHandle(){
var id = this.id, isShift = id.indexOf("shift") === 0,
value = parseInt(this.value, 10),
actions = GC.Spread.Sheets.Commands,
action;
switch (value) {
case 0:
action = isShift ? actions.moveToPreviousCell : actions.moveToNextCell;
break;
case 1:
action = isShift ? actions.selectPreviousControl : actions.selectNextControl;
break;
case 2:
action = isShift ? actions.moveToPreviousCellThenControl : actions.moveToNextCellThenControl;
break;
}
if (action) {
spread.commandManager().register("customCommand"+ new Date().valueOf(), action, GC.Spread.Commands.Key.tab, false, isShift, false, false);
}
}
_getElementById("nextControl").addEventListener('change',_handle);
_getElementById("preControl").addEventListener('change',_handle);
function _handle(){
var id = this.id, isPre = id.indexOf("pre") === 0,
value = this.value,
control = value ? document.getElementById(value) : undefined;
if (isPre) {
spread.previousControl(control);
} else {
spread.nextControl(control);
}
}
_getElementById("hideSelection").addEventListener('click',function () {
spread.options.hideSelection = this.checked;
});
};
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">
<p>［Tabキーで次の位置に移動］を［次のコントロール］に変更してから、Spreadインスタンスをクリックしてフォーカスを与えます。</p>
<p>［Tab］キーを押すと、このページ上の［直前の編集］テキストボックスにフォーカスが移動します。</p>
<p>この機能を使用すると、Spreadでの特定のナビゲーションキーの動作を変更できます。</p>
<div class="option-row" style="margin-bottom: 10px;">
<input type="text" id="preEdit" placeholder="直前の編集" title="候補となる直前のコントロール" />
<input type="button" id="preButton" title="Candidate previous control too" value="直前のコントロール" />
</div>
<div class="option-row">
<input type="text" id="nextEdit" placeholder="次の編集" title="候補となる次のコントロール" />
<input type="button" id="nextButton" title="Candidate next control too" value="次のボタン" />
</div>
<div class="option-row">
<label>［Tab］キーで次の位置に移動：</label>
<select id="tabAction">
<option value="0" selected="selected">Next cell</option>
<option value="1">Next control</option>
<option value="2">Next cell then control</option>
</select>
<label class="colorLabel">［Tab］キーを押したときのナビゲーション動作を指定します。</label>
</div>
<div class="option-row">
<label>［Shift］+［Tab］キーで次の位置に移動：</label>
<select id="shiftTabAction">
<option value="0" selected="selected">Previous cell</option>
<option value="1">Previous control</option>
<option value="2">Previous cell then control</option>
</select>
<label class="colorLabel">［Shift］+［Tab］キーを押したときのナビゲーション動作を指定します。</label>
</div>
<div class="option-row">
<label>次のコントロール：</label>
<select id="nextControl">
<option value="" selected="selected">Not set (auto detect)</option>
<option value="nextEdit">Next Edit</option>
<option value="nextButton">Next Button</option>
</select>
<label class="colorLabel">Spreadインスタンスに対する次のコントロールを定義します。</label>
</div>
<div class="option-row">
<label>1つ前のコントロール：</label>
<select id="preControl">
<option value="" selected="selected">Not set (auto detect)</option>
<option value="preEdit">Previous Edit</option>
<option value="preButton">Previous Button</option>
</select>
<label class="colorLabel">Spreadインスタンスに対する1つ前のコントロールを定義します。</label>
</div>
<div class="option-row">
<input type="checkbox" id="hideSelection" />
<label for="hideSelection">選択範囲を非表示</label>
<label class="colorLabel">このチェックボックスをオンにすると、Spreadインスタンス上に選択範囲が表示されなくなります。</label>
</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;
}
.options-toggle {
display: none;
}
input, select {
padding: 4px 6px;
margin: 4px 0;
width: 100%;
box-sizing: border-box;
}
input[type=checkbox] {
width: auto;
}
.colorLabel {
width: auto;
color: #606060;
display: block;
}
.demo-options {
margin-top: 5px;
}
p{
padding:2px 10px;
background-color:lavender;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}