Angular 구성 스프레드시트

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

    Angular Configuring Spreadsheet Example

    Configuring Cell Editing

    When a user edits a cell value and confirms the new input, the IgxSpreadsheetComponent control has the ability to navigate to cells adjacent to the currently active cell on press of the Enter key, depending on the configuration of the spreadsheet.

    In order to enable this Enter key navigation, you can set the isEnterKeyNavigationEnabled property to true. If set to false, the active cell will stay the same when pressing the Enter key.

    You can also configure the direction of the adjacent cell navigated to on press of the Enter key by setting the enterKeyNavigationDirection property to Down, Up, Left or Right.

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

    <igx-spreadsheet isEnterKeyNavigationEnabled=true
    enterKeyNavigationDirection="Left">
</igx-spreadsheet>

    this.spreadsheet.isEnterKeyNavigationEnabled = true;
this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left;

    Configuring Formula Bar

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

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

    <igx-spreadsheet isFormulaBarVisible=true></igx-spreadsheet>

    this.spreadsheet.isFormulaBarVisible = true;

    Configuring Gridlines

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

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

    <igx-spreadsheet areGridlinesVisible=true></igx-spreadsheet>

    this.spreadsheet.areGridlinesVisible = true;

    Configuring Headers

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

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

    <igx-spreadsheet areHeadersVisible=false></igx-spreadsheet>

    this.spreadsheet.areHeadersVisible = false;

    Configuring Navigation

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

    For example, if you are in end mode, and you click in a large 100x100 block of data, and press the Right arrow key, this will navigate to the right end of the row that you are in to the furthest right column with data. After this operation, the IgxSpreadsheetComponent will pop out of end mode.

    End mode goes into effect at runtime when the user presses the End key, but it can be configured programmatically by setting the isInEndMode property of the spreadsheet control.

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

    <igx-spreadsheet isInEndMode=true></igx-spreadsheet>

    this.spreadsheet.isInEndMode = true;

    Configuring Protection

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

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

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

    Configuring Selection

    The IgxSpreadsheetComponent control allows you to configure the type of selection allowed in the control then modifier keys (Shift or Ctrl) are pressed by the user. This is done by setting the selectionMode property of the spreadsheet to one of the following values:

    • AddToSelection: New cell ranges are added to the SpreadsheetSelection object's cellRanges collection without needing to hold down the ctrl key when dragging via the mouse and a range is added with the first arrow key navigation after entering the mode. One can enter the mode by pressing Shift+F8.
    • ExtendSelection: 활성 셀을 나타내는 SpreadsheetSelection 개체의 cellRanges 컬렉션의 선택 범위는 마우스를 사용하여 셀을 선택하거나 키보드를 통해 탐색할 때 업데이트됩니다.
    • Normal: The selection is replaced when dragging the mouse to select a cell or range of cells. Similarly when navigating via the keyboard a new selection is created. One may add a new range by holding the Ctrl key and using the mouse and one may alter the selection range containing the active cell by holding the Shift key down while clicking with the mouse or navigating with the keyboard such as with the arrow keys.

    위에서 설명한 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));

    Configuring Tab Bar Area

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

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

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

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

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

    Configuring Zoom Level

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

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

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

    <igx-spreadsheet zoomLevel=200></igx-spreadsheet>

    this.spreadsheet.zoomLevel = 200;

    API References