정밀 선택
SpreadJS를 사용하면 워크시트에서 셀, 행, 열 또는 여러 범위를 선택할 수 있습니다. 일반적으로 많은 수의 셀이나 여러 셀 범위를 선택할 때, 실수로 일부 셀을 잘못 선택하고 이를 선택 해제하고자 할 경우, 전체 선택을 해제한 후 다시 선택해야 하므로 전체 프로세스가 너무 번거로울 수 있습니다.
SpreadJS는 사용자가 선택된 범위에서 특정 셀을 선택 해제하고 스프레드시트 작업 시 요구 사항에 따라 선택을 사용자 정의할 수 있도록 하여, 상당한 시간을 절약하고 중복 작업을 피할 수 있도록 합니다.
워크시트에서 영역 선택을 시작하려면 마우스 왼쪽 버튼을 클릭하고 끌어 셀 블록, 열 또는 행을 선택하면 됩니다. 마우스 클릭과 Ctrl 키를 함께 사용하여 여러 셀 범위를 선택할 수도 있습니다.
다음 이미지는 워크시트에서 셀 범위를 선택한 후 선택 해제 동작이 작동하는 방식을 보여줍니다.
첫 번째 이미지는 선택 해제 작업이 원래 선택 영역 내에서 실행될 때 네 개의 선택 영역으로 동시에 작업하는 방법을 보여줍니다.
두 번째 이미지는 선택 해제 작업이 원래 선택을 넘는 경우 네 개 미만의 선택 영역으로 작업하는 방법을 보여줍니다.
세 번째 이미지는 선택 해제 작업이 원래 선택 영역 내에서 수행될 때 "선택 없음"으로 작업하는 방법을 보여줍니다. 이 경우, 선택 해제가 실행된 후 선택 해제된 선택의 시작 부분에 활성 셀이 추가됩니다.
탐색 키는 키보드 탐색 단축키 문서에서 확인할 수 잇습니다.
다음 코드 샘플은 셀 범위를 선택합니다.
activeSheet.addSelection(4, 0, 2, 2);
//activeSheet.clearSelection();
var sels = activeSheet.getSelections();
alert(sels.length);selectionUnit 메서드를 사용하여 선택 단위 유형(셀, 열 또는 행)을 지정할 수 있습니다. selectionPolicy 메서드를 사용하여 선택 범위(단일, 범위 또는 다중 범위)를 지정할 수 있습니다.
다음 코드 샘플은 단일 행 또는 블록 행 선택을 허용합니다.
activeSheet.selectionUnit(GC.Spread.Sheets.SelectionUnit.Row);
activeSheet.selectionPolicy(GC.Spread.Sheets.SelectionPolicy.Range);options.selectionBackColor 및 options.selectionBorderColor 속성을 사용하여 선택 색상과 테두리를 설정할 수 있습니다. 표준 색상 및 테마 색상을 사용할 수 있습니다.
다음 코드 샘플은 선택된 영역과 테두리에 대한 색상을 설정합니다.
activeSheet.options.selectionBackColor = "Accent 6";
activeSheet.options.selectionBorderColor = "Accent 1";선택을 해제하려면 키보드에서 Ctrl 키 또는 Cmd 키를 누른 상태로 왼쪽, 위쪽, 오른쪽 또는 아래쪽 화살표 키를 사용하여 선택 해제할 셀을 지정하면 됩니다.
선택 해제 동작을 활성화하려면 allowUserDeselect 속성을 boolean 값 "true"로 설정해야 합니다. 기본적으로 이 옵션은 true로 설정되어 있습니다. 그러나 사용자가 SpreadJS 작업 중 선택 해제 동작을 원하지 않는 경우, 이 옵션을 "false"로 설정할 수 있습니다.
다음 코드 샘플은 워크시트에서 선택을 해제하는 방법을 보여줍니다.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
// "Excel과 유사한 정밀 선택"을 위해 - 사용자는 allowUserDeselect 스프레드 옵션을 true로 설정해야 합니다.
// 기본적으로 이 옵션은 true입니다. "Excel과 유사한 정밀 선택"을 원하지 않는 경우, 이 옵션을 false로 설정해야 합니다.
spread.options.allowUserDeselect = true;