Web Components 스프레드시트 구성

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

    Web Components Configuring Spreadsheet Example

    Configuring Cell Editing

    사용자가 셀 값을 편집하고 새 입력을 확인하면, 컨트롤은IgcSpreadsheetComponent 스프레드시트 구성에 따라 키를 눌러 ENTER 현재 활성 셀 인접한 셀로 이동할 수 있습니다.

    이 ENTER 키 내비게이션을 활성화하려면 속성을isEnterKeyNavigationEnabled​ ​true로 설정할 수 있습니다. false로 설정하면 키를 눌러 ENTER도 활성 셀은 동일하게 유지됩니다.

    를 누를 때 탐색되는 인접 셀의 방향을 구성할 수도 있습니다. 들어가다 키를 설정하여enterKeyNavigationDirection property를Down,Up,Left 또는Right.

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

    <igc-spreadsheet is-enter-key-navigation-enabled="true"
    enter-key-navigation-direction="Left">
</igc-spreadsheet>

    import { SpreadsheetEnterKeyNavigationDirection } from 'igniteui-webcomponents-spreadsheet';

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

    Configuring Formula Bar

    The Web Components IgcSpreadsheetComponent allows you to configure the visibility of the formula bar by setting the isFormulaBarVisible property of the control.

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

    <igc-spreadsheet is-formula-bar-visible="true"></igc-spreadsheet>

    this.spreadsheet.isFormulaBarVisible = true;

    Configuring Gridlines

    ​IgcSpreadsheetComponent컨트롤의 속성을 설정areGridlinesVisible 하여 그리드라인의 가시성을 설정할 수 있습니다.

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

    <igc-spreadsheet are-gridlines-visible="true"></igc-spreadsheet>

    this.spreadsheet.areGridlinesVisible = true;

    Configuring Headers

    컨트롤IgcSpreadsheetComponent의 속성을 설정areHeadersVisible 하여 헤더의 가시성을 설정할 수 있습니다.

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

    <igc-spreadsheet are-headers-visible="false"></igc-spreadsheet>

    this.spreadsheet.areHeadersVisible = false;

    Configuring Navigation

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

    예를 들어, 엔드 모드에서 100x100 크기의 큰 데이터 블록을 클릭하고 화살표 키를 누르 → 면, 해당 행의 오른쪽 끝에서 가장 오른쪽 열로 이동해 데이터가 있는 열로 이동합니다. 이 작업이 끝나면 종료IgcSpreadsheetComponent 모드에서 벗어납니다.

    엔드 모드는 사용자가 키를 누르 END는 런타임에 작동하지만, 스프레드시트 컨트롤의 속성을 설정isInEndMode 하여 프로그래밍적으로 설정할 수 있습니다.

    다음 코드 조각들은 위 내용을 보여주며, 이IgcSpreadsheetComponent 모드가 종료 모드에서 시작된다는 점입니다:

    <igc-spreadsheet is-in-end-mode="true"></igc-spreadsheet>

    this.spreadsheet.isInEndMode = true;

    Configuring Protection

    워크IgcSpreadsheetComponent 북의 보호는 워크시트별로 존중합니다. 워크시트 보호 설정은 워크시트에서 보호Protect() 메서드와Unprotect() 해제 메서드를 호출하여 구성할 수 있습니다.

    아래 코드를 사용하여 통제군IgcSpreadsheetComponent의 현재 활성화된 워크시트에서 보호 기능을 활성화하거나 비활성화할 수 있습니다:

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

    Configuring Selection

    이 컨트롤은IgcSpreadsheetComponent 사용자가 허용하는 선택 유형을 설정할 수 있게 해주며, 사용자가 수정키(SHIFT 또는 CTRL OR)를 누릅니다. 이는 스프레드시트의 속성을 다음 값 중 하나로 설정selectionMode 함으로써 이루어집니다:

    • AddToSelection: 새 셀 범위가SpreadsheetSelection 객체의cellRanges 누르지 않고도 수집할 수 있습니다. CTRL 키를 누르면 모드에 들어간 후 첫 번째 화살표 키 탐색으로 범위가 추가됩니다. 를 눌러 모드로 들어갈 수 있습니다. 교대 + F8.
    • ExtendSelection: 객체SpreadsheetSelection 컬렉션 내cellRanges 활성 셀을 나타내는 선택 범위는 마우스를 사용해 셀을 선택하거나 키보드로 탐색할 때 갱신됩니다.
    • Normal: 마우스를 드래그하여 셀이나 셀 범위를 선택할 때 선택 영역이 대체됩니다. 마찬가지로 키보드로 이동할 때도 새로운 선택지가 생성됩니다. 키를 누르고 CTRL 마우스를 사용해 새로운 범위를 추가할 수 있고, 마우스로 클릭하거나 방향키처럼 키보드로 탐색할 때 키를 누르고 SHIFT 있으면 활성 셀이 포함된 선택 범위를 변경할 수 있습니다.

    위 설명에서 언급한 객체는SpreadsheetSelection 제어 명령어의activeSelection 속성을 사용하여IgcSpreadsheetComponent 얻을 수 있습니다.

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

    <igc-spreadsheet selection-mode="ExtendSelection"></igc-spreadsheet>

    import { SpreadsheetCellSelectionMode } from 'igniteui-webcomponents-spreadsheet';

    this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;

    제어 선택IgcSpreadsheetComponent은 프로그래밍적으로 설정하거나 얻을 수도 있습니다. 단일 선택의 경우,activeCell 다중 선택은 컨트롤SpreadsheetSelection 속성에서IgcSpreadsheetComponent 반환되는 객체를 통해activeSelection 수행됩니다.

    그SpreadsheetSelection 객체는 다음과 같다.AddCellRange()이 메서드는 스프레드시트 선택에 새로운 셀 범위를 프로그래밍적으로 추가할 수 있게 해줍니다SpreadsheetCellRange 객체.

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

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

    Configuring Tab Bar Area

    그IgcSpreadsheetComponent 컨트롤은 탭 바 영역의 가시성과 너비 구성을 존중합니다.WindowOptions 현재 활동 중인workbook를 통해tabBarWidth 그리고TabBarVisibility 각각 속성입니다.

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

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

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

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

    Configuring Zoom Level

    The Web Components Spreadsheet component supports zooming in and out by configuring its zoomLevel property. The zoom level can be a maximum of 400% and a minimum of 10%.

    이 속성 값을 숫자로 설정하면 백분율을 정수로 나타내므로, 100zoomLevel으로 설정하는 것은 100%로 설정하는 것과 같습니다.

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

    <igc-spreadsheet zoom-level="200"></igc-spreadsheet>

    this.spreadsheet.zoomLevel = 200;

    API References