You can select cells, rows, columns, or multiple ranges in SpreadJS.
Click one cell and drag the mouse to select a range. Then you will see the range selection.
You can change the selection border color and background color by using the selectionBorderColor and selectionBackColor options, as shown in the following code:
You can set which items a user can select by using the selectionPolicy and selectionUnit options. The SelectionPolicy provides the following types:
single: Allows you to only select single items.
range: Allows you to select single items and ranges of items, but not multiple ranges.
mutliRange: Allows you to select single items and ranges of items, including multiple ranges.
The SelectionUnit enumeration contains the following types:
cell: Indicates that the smallest unit that can be selected is a cell.
row: Indicates that the smallest unit that can be selected is a row.
column: Indicates that the smallest unit that can be selected is a column.
You can use these two methods to control the select mode.
Press the Ctrl key and select some ranges; you will select multiple ranges. Also you can use the addSelection method to add more selections, and then use the getSelections method to get all the selected ranges. Use the clearSelection method to clear the selections. These methods are used in the following code:
The workbook allowUserDeselect option allow you to control whether enable to deselect current selection by mouse
Besides using the mouse to select, you can use the setSelection method to select some cells and use the setActiveCell method to select one cell. The active cell is the first cell in the selection. Use the getActiveRowIndex and getActiveColumnIndex methods to get the active cell row and column indexes, as shown in the following code:
After you set the active cell, if the active cell is not visible, you can use the showCell, showRow, and showColumn methods to make the active cell visible.
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 charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/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$/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">
Change the provided properties to see how they affect the selection.
</div>
<div class="option-row">
<label for="selectionPolicy" class="normal">SelectionPolicy:</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">SelectionUnit:</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">Allow User Deselect</label>
</div>
<div class="option-row">
<label for="backColor" class="wide">Selection BackColor:</label>
</div>
<div class="option-row">
<input type="text" id="backColor" value="rgba(204,255,51, 0.3)" />
<input type="button" value="Set" id="setBackColor" class="narrow" />
</div>
<div class="option-row">
<label for="borderColor" class="wide">Selection BorderColor:</label>
</div>
<div class="option-row">
<input type="text" id="borderColor" value="Accent 3 -40" />
<input type="button" value="Set" id="setBorderColor" class="narrow" />
</div>
<div class="option-row">
<input type="button" id="tabStoptrue_Btn" value="SetTabStop True" class="wide" style="padding-top: 4px"/>
</div>
<div class="option-row">
<input type="button" id="tabStopfalse_Btn" value="SetTabStop False" class="wide" style="padding-top: 4px"/>
</div>
<div class="option-row">
<label style="display: block;padding-top: 10px;">Set this to control whether the user can set focus to a selection using the Tab key.</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;
}
