シート上の特定領域を選択するには、1つのセルをクリックして、マウスでドラッグします。これで、選択領域が作成されます。
選択領域の境界線の色および背景色を変更するには、次のコードに示すように、selectionBorderColorおよびselectionBackColorオプションを使用します。
ユーザーが選択可能なアイテムを設定するには、selectionPolicyおよびselectionUnitオプションを使用します。SelectionPolicyには、以下のタイプがあります。
single: 1つの項目のみを選択できます。
range: 1つの項目と項目の範囲を選択できますが、複数の範囲は選択できません。
multiRange: 1つの項目と項目の範囲を選択でき、複数の範囲も選択できます。
SelectionUnitには、以下のタイプがあります。
cell: 選択できる最小単位がセルであることを示します。
row: 選択できる最小単位が行であることを示します。
column: 選択できる最小単位が列であることを示します。
これらの2つのメソッドにより、選択モードを制御することができます。
複数の領域を選択するには、［Ctrl］キーを押しながら必要な領域を選択します。また、addSelectionメソッドを使用しても、選択領域を追加できます。すべての選択領域を取得するには、getSelectionsメソッドを使用します。選択領域をクリアするには、clearSelectionメソッドを使用します。次のコードは、これらのメソッドの用法を示します。
ワークブックのallowUserDeselectオプションを使用すると、ユーザーに対し、現在の選択領域をマウスで選択解除できるようにするかどうかを定義できます。
セルをマウスで選択するだけでなく、setSelectionメソッドを使用して複数のセルを選択することも、setActiveCellメソッドを使用して1つのセルを選択することもできます。アクティブセルは、選択領域内の先頭セルです。アクティブセルの行および列インデックスを取得するには、次のコードに示すように、getActiveRowIndexおよびgetActiveColumnIndexメソッドを使用します。
アクティブセルを設定したにもかかわらず、このセルが表示されていない場合は、showCell、showRow、およびshowColumnの各メソッドを使用して、アクティブセルを表示できます。
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
spread.suspendPaint();
initSpread(spread);
spread.resumePaint();
};
function initSpread(spread) {
var sheet = spread.getActiveSheet();
spread.fromJSON(data[0]);
_getElementById('selectionPolicy').addEventListener('change', function() {
var sheet = spread.getActiveSheet();
var policy = parseInt(this.value, 10);
sheet.selectionPolicy(policy);
});
_getElementById('selectionUnit').addEventListener('change', function() {
var sheet = spread.getActiveSheet();
var unit = parseInt(this.value, 10);
sheet.selectionUnit(unit);
});
_getElementById('setBackColor').addEventListener('click', function() {
var sheet = spread.getActiveSheet();
var backColor = _getElementById('backColor').value;
sheet.options.selectionBackColor = backColor;
});
_getElementById('setBorderColor').addEventListener('click', function() {
var sheet = spread.getActiveSheet();
var borderColor = _getElementById('borderColor').value;
sheet.options.selectionBorderColor = borderColor;
});
_getElementById('tabStoptrue_Btn').addEventListener('click', function() {
setIsTabStop(spread, true);
});
_getElementById('tabStopfalse_Btn').addEventListener('click', function() {
setIsTabStop(spread, false);
});
_getElementById('chk_allowDeselect').addEventListener('click', function() {
spread.options.allowUserDeselect = this.checked;
});
}
function setIsTabStop(spread, isTabStop) {
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
var sels = sheet.getSelections();
for (var index = 0; index < sels.length; index++) {
var selRange = sels[index];
if (selRange.col >= 0 && selRange.row >= 0) {
sheet.getRange(selRange.row, selRange.col, selRange.rowCount, selRange.colCount).tabStop(isTabStop);
} else if (selRange.row >= 0) {
sheet.getRange(selRange.row, -1, selRange.rowCount, -1).tabStop(isTabStop);
} else if (selRange.col >= 0) {
sheet.getRange(-1, selRange.col, -1, selRange.colCount).tabStop(isTabStop);
}
}
sheet.resumePaint();
}
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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="dataset.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/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="options-row">
以下のオプションを設定して、選択処理がどのように変更されるかご確認ください。
</div>
<div class="option-row">
<label for="selectionPolicy" class="normal">選択ポリシー：</label>
</div>
<div class="option-row">
<select id="selectionPolicy">
<option value="0">Single</option>
<option value="1">Range</option>
<option value="2" selected="selected">MultiRange</option>
</select>
</div>
<div class="option-row">
<label for="selectionUnit" class="normal">選択単位：</label>
</div>
<div class="option-row">
<select id="selectionUnit">
<option value="0" selected="selected">Cell</option>
<option value="1">Row</option>
<option value="2">Column</option>
</select>
</div>
<div class="option-row">
<input type="checkbox" id="chk_allowDeselect" checked />
<label for="chk_allowDeselect">ユーザーに選択解除を許可</label>
</div>
<div class="option-row">
<label for="backColor" class="wide">選択領域の背景色：</label>
</div>
<div class="option-row">
<input type="text" id="backColor" value="rgba(204,255,51, 0.3)" />
<input type="button" value="設定" id="setBackColor" class="narrow" />
</div>
<div class="option-row">
<label for="borderColor" class="wide">選択領域の枠線の色：</label>
</div>
<div class="option-row">
<input type="text" id="borderColor" value="Accent 3 -40" />
<input type="button" value="設定" id="setBorderColor" class="narrow" />
</div>
<div class="option-row">
<input type="button" id="tabStoptrue_Btn" value="TabStopを有効にする" class="wide" style="padding-top: 4px" />
<input type="button" id="tabStopfalse_Btn" value="TabStopを無効にする" class="wide" style="padding-top: 4px" />
<label style="display: block;padding-top: 10px;">ユーザーが［Tab］キーを使用して選択領域にフォーカスを設定できるかどうかを指定します。</label>
</div>
</div>
</div></body>
</html>
input[type="text"] {
width: 160px;
}
label.normal {
display: inline-block;
width: 120px;
}
select {
width: 120px;
height: 35px;
}
label.wide {
display: inline-block;
width: 160px;
}
input[type="button"].narrow {
width: 60px;
}
input[type="button"].wide {
width: 160px;
}
.colorLabel {
background-color: #F4F8EB;
}
.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;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
