Angular 구성 스프레드시트

    Angular Spreadsheet 구성 요소를 사용하면 사용자는 컨트롤의 다양한 측면을 구성할 수 있습니다. 여기에는 셀 편집, 눈금선 및 머리글 표시, 보호, 확대/축소 수준, Excel 워크시트와 관련된 기타 다양한 속성이 포함되지만 이에 국한되지는 않습니다.

    Angular 구성 스프레드시트 예

    셀 편집 구성

    사용자가 셀 값을 편집하고 새 입력을 확인하면 IgxSpreadsheetComponent 컨트롤은 스프레드시트 구성에 따라 Enter 키를 누를 때 현재 활성 셀에 인접한 셀로 이동하는 기능을 갖습니다.

    이 Enter 키 탐색을 활성화하려면 isEnterKeyNavigationEnabled 속성을 true로 설정하면 됩니다. false로 설정하면 Enter 키를 누를 때 활성 셀이 동일하게 유지됩니다.

    또한 입력하다 키를 설정하여 enterKeyNavigationDirection 재산 Down, Up, Left 또는 Right.

    다음 코드 조각은 위 내용을 보여줍니다.

    <igx-spreadsheet isEnterKeyNavigationEnabled=true enterKeyNavigationDirection="Left"> </igx-spreadsheet>
    this.spreadsheet.isEnterKeyNavigationEnabled = true; this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left;

    수식 입력줄 구성

    Angular IgxSpreadsheetComponent 사용하면 컨트롤의 isFormulaBarVisible 속성을 설정하여 수식 입력줄의 가시성을 구성할 수 있습니다.

    다음 코드 조각은 위 내용을 보여줍니다.

    <igx-spreadsheet isFormulaBarVisible=true></igx-spreadsheet>
    this.spreadsheet.isFormulaBarVisible = true;

    눈금선 구성

    ​IgxSpreadsheetComponent 사용하면 컨트롤의 areGridlinesVisible 속성을 설정하여 눈금선의 가시성을 구성할 수 있습니다.

    다음 코드 조각은 위 내용을 보여줍니다.

    <igx-spreadsheet areGridlinesVisible=true></igx-spreadsheet>
    this.spreadsheet.areGridlinesVisible = true;

    헤더 구성

    ​IgxSpreadsheetComponent 사용하면 컨트롤의 areHeadersVisible 속성을 설정하여 헤더의 가시성을 구성할 수 있습니다.

    다음 코드 조각은 위 내용을 보여줍니다.

    <igx-spreadsheet areHeadersVisible=false></igx-spreadsheet>
    this.spreadsheet.areHeadersVisible = false;

    탐색 구성

    ​IgxSpreadsheetComponent 컨트롤을 사용하면 컨트롤이 "종료 모드"인지 여부를 구성하여 워크시트의 셀 간 탐색을 구성할 수 있습니다. 종료 모드는 화살표 키를 누르면 현재 셀에서 화살표 키를 누르는 방향에 따라 인접한 셀에 데이터가 있는 행이나 열의 끝으로 활성 셀이 이동하는 기능입니다. 이 기능은 대규모 데이터 블록의 끝 부분을 매우 빠르게 탐색하는 데 유용합니다.

    예를 들어, 종료 모드에서 큰 100x100 데이터 블록을 클릭하고 Right 화살표 키를 누르면 현재 있는 행의 오른쪽 끝, 데이터가 있는 가장 오른쪽 열로 이동합니다. 이 작업 후에 IgxSpreadsheetComponent가 종료 모드에서 나옵니다.

    종료 모드는 사용자가 End 키를 누르면 런타임에 적용되지만 스프레드시트 컨트롤의 isInEndMode 속성을 설정하여 프로그래밍 방식으로 구성할 수 있습니다.

    다음 코드 조각은 IgxSpreadsheetComponent가 종료 모드에서 시작된다는 점에서 위 내용을 보여줍니다.

    <igx-spreadsheet isInEndMode=true></igx-spreadsheet>
    this.spreadsheet.isInEndMode = true;

    보호 구성

    ​IgxSpreadsheetComponent는 워크시트별로 통합 문서 보호를 존중합니다. 워크시트의 보호 구성은 워크시트에서 Protect() 메서드를 호출하여 보호하고 Unprotect() 메서드를 호출하여 보호를 해제하여 구성할 수 있습니다.

    아래 코드를 사용하여 IgxSpreadsheetComponent 컨트롤의 현재 활성 워크시트에서 보호를 활성화하거나 비활성화할 수 있습니다.

    this.spreadsheet.activeWorksheet.protect(); this.spreadsheet.activeWorksheet.unprotect();

    선택 구성

    ​IgxSpreadsheetComponent 컨트롤을 사용하면 컨트롤에서 허용되는 선택 유형을 구성한 다음 사용자가 수정자 키(Shift 또는 Ctrl)를 누를 수 있습니다. 스프레드시트의 selectionMode 속성을 다음 값 중 하나로 설정하면 됩니다.

    • AddToSelection: 마우스로 드래그할 때 Ctrl 키를 누르지 않고도 SpreadsheetSelection 개체의 cellRanges 컬렉션에 새 셀 범위가 추가되고, 모드에 들어간 후 첫 번째 화살표 키 탐색으로 범위가 추가됩니다. Shift+F8을 눌러 모드로 들어갈 수 있습니다.
    • ExtendSelection: 활성 셀을 나타내는 SpreadsheetSelection 개체의 cellRanges 컬렉션의 선택 범위는 마우스를 사용하여 셀을 선택하거나 키보드를 통해 탐색할 때 업데이트됩니다.
    • Normal: 셀이나 셀 범위를 선택하기 위해 마우스를 드래그하면 선택 항목이 대체됩니다. 마찬가지로 키보드를 통해 탐색할 때 새로운 선택 항목이 생성됩니다. Ctrl 키를 누른 채 마우스를 사용하여 새 범위를 추가할 수 있으며, Shift 키를 누른 채 마우스로 클릭하거나 화살표 키와 같은 키보드로 탐색하여 활성 셀을 포함하는 선택 범위를 변경할 수 있습니다.

    위에서 설명한 SpreadsheetSelection 객체는 IgxSpreadsheetComponent 컨트롤의 activeSelection 속성을 이용하여 얻을 수 있습니다.

    다음 코드 조각은 선택 모드의 구성을 보여줍니다.

    <igx-spreadsheet selectionMode="ExtendSelection"></igx-spreadsheet>
    this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;

    ​IgxSpreadsheetComponent 컨트롤의 선택은 프로그래밍 방식으로 설정하거나 얻을 수도 있습니다. 단일 선택의 경우 activeCell 속성을 설정할 수 있습니다. 다중 선택은 IgxSpreadsheetComponent 컨트롤의 activeSelection 속성에 의해 반환되는 SpreadsheetSelection 개체를 통해 수행됩니다.

    그만큼 SpreadsheetSelection 객체는 AddCellRange() 새로운 형식으로 스프레드시트의 선택 영역에 셀 범위를 프로그래밍 방식으로 추가할 수 있는 방법입니다. SpreadsheetCellRange 물체.

    다음 코드 조각은 스프레드시트의 선택 항목에 셀 범위를 추가하는 방법을 보여줍니다.

    this.spreadsheet.activeSelection.addCellRange(new SpreadsheetCellRange(2, 2, 5, 5));

    탭 표시줄 영역 구성

    그만큼 IgxSpreadsheetComponent 컨트롤은 탭 표시줄 영역의 가시성 및 너비 구성을 따릅니다. WindowOptions 현재 활동 중인 것 중 workbook를 통해 tabBarWidth 그리고 TabBarVisibility 각각 속성.

    탭바 영역은 워크시트 이름을 컨트롤의 탭으로 시각화하는 영역입니다.

    다음 코드 조각을 사용하여 탭 표시줄의 가시성과 너비를 구성할 수 있습니다.

    this.spreadsheet.workbook.windowOptions.tabBarVisible = false; this.spreadsheet.workbook.windowOptions.tabBarWidth = 200;

    확대/축소 수준 구성

    Angular Spreadsheet 구성 요소는 zoomLevel 속성을 구성하여 확대 및 축소를 지원합니다. 확대/축소 수준은 최대 400%, 최소 10%일 수 있습니다.

    이 속성을 숫자로 설정하면 백분율이 정수로 표시되므로 zoomLevel 100으로 설정하는 것은 100%로 설정하는 것과 같습니다.

    다음 코드 조각은 스프레드시트의 확대/축소 수준을 구성하는 방법을 보여줍니다.

    <igx-spreadsheet zoomLevel=200></igx-spreadsheet>
    this.spreadsheet.zoomLevel = 200;

    API 참조