This sample shows how you can customize the selection behavior in the workbook.
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:
var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
var sheet = spread.getActiveSheet();
sheet.options.selectionBorderColor = 'red';
sheet.options.selectionBackColor = 'transparent';
You can set which items a user can select by using the selectionPolicy and selectionUnit options. The SelectionPolicy provides the following types:
The SelectionUnit enumeration contains the following types:
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:
sheet.addSelection(0, 0, 3, 3);
sheet.addSelection(4, 3, 2, 2);
var selections = sheet.getSelections();
// after clearSelection the selections.length is 0.
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:
sheet.setSelection(0, 0, 3, 3);
sheet.setActiveCell(20, 3, 2, 2);
var activeRowIndex = sheet.getActiveRowIndex();
var activeColumnIndex = sheet.getActiveColumnIndex();
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.
var verticalPosition = GC.Spread.Sheets.VerticalPosition.top;
var horizontalPosition = GC.Spread.Sheets.HorizontalPosition.left;
sheet.showCell(20, 3, verticalPosition, horizontalPosition);
// up code and down code work out the same result.