워크시트를 사용한 Web Components

    Infragistics Web Components Excel Engine의 worksheet는 데이터가 보관되는 곳입니다. 워크시트의 행과 셀을 사용하여 작업하고 해당 값을 설정하여 데이터를 입력할 수 있습니다. worksheet 하면 아래에 표시된 대로 셀의 형식을 필터링, 정렬 및 사용자 지정할 수 있습니다.

    워크시트를 사용한 Web Components 예제

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    다음 코드는 아래 코드 조각을 사용하는 데 필요한 가져오기를 보여줍니다.

    import { Workbook } from "igniteui-webcomponents-excel";
import { Worksheet } from "igniteui-webcomponents-excel";
import { WorkbookFormat } from "igniteui-webcomponents-excel";
import { Color } from "igniteui-webcomponents-core";

import { CustomFilterCondition } from "igniteui-webcomponents-excel";
import { ExcelComparisonOperator } from "igniteui-webcomponents-excel";
import { FormatConditionTextOperator } from "igniteui-webcomponents-excel";
import { OrderedSortCondition } from "igniteui-webcomponents-excel";
import { RelativeIndex } from "igniteui-webcomponents-excel";
import { SortDirection } from "igniteui-webcomponents-excel";
import { WorkbookColorInfo } from "igniteui-webcomponents-excel";
ts

    눈금선 구성

    눈금선은 워크시트의 셀을 시각적으로 구분하는 데 사용됩니다. 눈금선을 표시하거나 숨길 수 있으며 색상도 변경할 수 있습니다.

    워크시트의 displayOptions에 있는 showGridlines 속성을 사용하여 눈금선을 표시하거나 숨길 수 있습니다. 다음 코드는 워크시트에서 눈금선을 숨기는 방법을 보여줍니다.

    var workbook = new Workbook(WorkbookFormat.Excel2007);
var worksheet = workbook.worksheets().add("Sheet1");

worksheet.displayOptions.showGridlines = false;
ts

    워크시트의 displayOptions에 있는 gridlineColor 속성을 사용하여 눈금선 색상을 구성할 수 있습니다. 다음 코드는 워크시트의 눈금선을 빨간색으로 변경하는 방법을 보여줍니다.

    var workbook = new Workbook(WorkbookFormat.Excel2007);
var worksheet = workbook.worksheets().add("Sheet1");

worksheet.displayOptions.gridlineColor = "Red";
ts
    Ignite UI for Web Components | CTA 배너

    헤더 구성

    열과 행 머리글은 열과 행을 시각적으로 식별하는 데 사용됩니다. 또한 현재 선택된 셀이나 셀 영역을 시각적으로 강조하는 데에도 사용됩니다.

    워크시트의 displayOptions에 있는 showRowAndColumnHeaders 속성을 사용하여 열 및 행 머리글을 표시하거나 숨길 수 있습니다. 다음 코드는 행 및 열 머리글을 숨기는 방법을 보여줍니다.

    var workbook = new Workbook(WorkbookFormat.Excel2007);
var worksheet = workbook.worksheets().add("Sheet1");

worksheet.displayOptions.showRowAndColumnHeaders = false;
ts

    워크시트 편집 구성

    기본적으로 저장하는 worksheet 개체는 편집 가능합니다. worksheet 개체의 protect 메서드를 사용하여 워크시트를 보호하면 워크시트 편집을 비활성화할 수 있습니다. 이 방법에는 보호되는 부분을 결정하는 null 허용 bool 인수가 많이 있으며 이러한 옵션 중 하나는 개체 편집을 허용하는 것입니다. 이 옵션을 false로 설정하면 워크시트 편집이 방지됩니다.

    다음 코드는 워크시트에서 편집을 비활성화하는 방법을 보여줍니다.

    var workbook = new Workbook(WorkbookFormat.Excel2007);
var worksheet = workbook.worksheets().add("Sheet1");

worksheet.protect();
ts

    ​worksheet 개체의 protect 메서드를 사용하여 구조적 변경으로부터 워크시트를 보호할 수도 있습니다.

    보호가 설정되면 다음을 설정할 수 있습니다. cellFormat 사물 locked 개별 셀, 행, 병합된 셀 영역 또는 열에 대한 속성을 사용하여 해당 개체에 대한 워크시트 개체의 보호를 재정의합니다. 예를 들어, 한 열의 셀을 제외하고 워크시트의 모든 셀을 읽기 전용으로 설정하려면 워크시트를 보호한 다음 cellFormat 사물 locked 재산 거짓 특정에 WorksheetColumn 물체. 이렇게 하면 사용자가 열 내의 셀을 편집할 수 있지만 워크시트의 다른 셀은 편집할 수 없습니다.

    다음 코드는 이를 수행하는 방법을 보여줍니다.

    var workbook = new Workbook(WorkbookFormat.Excel2007);
var worksheet = workbook.worksheets().add("Sheet1");

worksheet.protect();
worksheet.columns(0).cellFormat.locked = false;
ts

    워크시트 영역 필터링

    필터링은 worksheet 시트 개체의 filterSettings 속성에서 검색할 수 있는 워크시트의 WorksheetFilterSettings에 필터 조건을 설정하여 수행됩니다. 필터 조건은 추가, 제거, 수정되거나 워크시트에서 reapplyFilters 메서드가 호출되는 경우에만 다시 적용됩니다. 지역 내 데이터가 변경되면 지속적으로 평가되지 않습니다.

    ​WorksheetFilterSettings 개체의 setRegion 메서드를 사용하여 필터를 적용할 영역을 지정할 수 있습니다.

    다음은 워크시트에 필터를 추가하는 데 사용할 수 있는 방법 및 설명 목록입니다.

    방법 설명
    applyAverageFilter 데이터가 전체 데이터 범위의 평균보다 낮거나 높은지 여부에 따라 데이터를 필터링할 수 있는 필터를 나타냅니다.
    applyDatePeriodFilter 월 또는 임의 분기의 날짜를 필터링할 수 있는 필터를 나타냅니다.
    applyFillFilter 배경 채우기를 기준으로 셀을 필터링하는 필터를 나타냅니다. 이 필터는 단일 CellFill을 지정합니다. 이 채우기가 있는 셀은 데이터 범위에 표시됩니다. 다른 모든 셀은 숨겨집니다.
    ApplyFixedValuesFilter 표시가 허용되는 특정 고정 값을 기반으로 셀을 필터링할 수 있는 필터를 나타냅니다.
    applyFontColorFilter 글꼴 색상을 기준으로 셀을 필터링하는 필터를 나타냅니다. 이 필터는 단일 색상을 지정합니다. 이 색상 글꼴이 있는 셀은 데이터 범위에 표시됩니다. 다른 모든 셀은 숨겨집니다.
    applyIconFilter 조건부 서식 아이콘을 기준으로 셀을 필터링할 수 있는 필터를 나타냅니다.
    applyRelativeDateRangeFilter 필터가 적용된 시점을 기준으로 날짜를 기준으로 날짜 셀을 필터링할 수 있는 필터를 나타냅니다.
    applyTopOrBottomFilter 정렬된 값의 위쪽 또는 아래쪽 셀을 필터링할 수 있는 필터를 나타냅니다.
    applyYearToDateFilter 날짜가 현재 연도의 시작과 필터가 평가되는 시간 사이에 발생하는 경우 날짜 셀에서 필터링할 수 있는 필터를 나타냅니다.
    applyCustomFilter 하나 또는 두 개의 사용자 정의 조건을 기반으로 데이터를 필터링할 수 있는 필터를 나타냅니다. 이러한 두 필터 조건은 논리적 "and" 또는 논리적 "or" 연산과 결합될 수 있습니다.

    워크시트 영역에 필터를 추가하는 예로 다음 코드 조각을 사용할 수 있습니다.

    var workbook = new Workbook(WorkbookFormat.Excel2007);
var worksheet = workbook.worksheets().add("Sheet1");

worksheet.filterSettings.setRegion("Sheet1!A1:A10");
worksheet.filterSettings.applyAverageFilter(0, AverageFilterType.AboveAverage);
ts

    창 고정 및 분할

    창 고정 기능을 사용하면 워크시트 상단의 행이나 왼쪽 열을 고정할 수 있습니다. 고정된 행과 열은 사용자가 스크롤하는 동안 항상 표시됩니다. 고정된 행과 열은 제거할 수 없는 단일 실선으로 워크시트의 나머지 부분과 구분됩니다.

    창 고정을 활성화하려면 다음을 설정해야 합니다. panesAreFrozen의 재산 worksheet 사물 displayOptions에게 진실. 그런 다음 고정할 행이나 열을 지정할 수 있습니다. FrozenRows 그리고 FrozenColumns 표시 옵션의 속성 frozenPaneSettings, 각각.

    ​FirstRowInBottomPane 및 FirstColumnInRightPane 속성을 각각 사용하여 아래쪽 창의 첫 번째 행이나 오른쪽 창의 첫 번째 열을 지정할 수도 있습니다.

    다음 코드 조각은 워크시트에서 고정 창 기능을 사용하는 방법을 보여줍니다.

    var workbook = new Workbook(WorkbookFormat.Excel2007);
var worksheet = workbook.worksheets().add("Sheet1");

worksheet.displayOptions.panesAreFrozen = true;

worksheet.displayOptions.frozenPaneSettings.frozenRows = 3;
worksheet.displayOptions.frozenPaneSettings.frozenColumns = 1;

worksheet.displayOptions.frozenPaneSettings.firstColumnInRightPane = 2;
worksheet.displayOptions.frozenPaneSettings.firstRowInBottomPane = 6;
ts

    워크시트 확대/축소 수준 설정

    다음을 사용하여 각 워크시트의 확대/축소 수준을 독립적으로 변경할 수 있습니다. MagnificationInNormalView의 재산 worksheet 사물 displayOptions. 이 속성은 10에서 400 사이의 값을 가지며 적용하려는 확대/축소 비율을 나타냅니다.

    다음 코드는 이를 수행하는 방법을 보여줍니다.

    var workbook = new Workbook(WorkbookFormat.Excel2007);
var worksheet = workbook.worksheets().add("Sheet1");

worksheet.displayOptions.magnificationInNormalView = 300;
ts

    워크시트 수준 정렬

    정렬은 열이나 행의 워크시트 수준 개체에 정렬 조건을 설정하여 수행됩니다. 열이나 행을 오름차순이나 내림차순으로 정렬할 수 있습니다.

    이는 시트의 sortSettings 속성을 사용하여 검색할 수 있는 worksheet 개체의 WorksheetSortSettings에 영역 및 정렬 유형을 지정하여 수행됩니다.

    시트의 정렬 조건은 정렬 조건이 추가, 제거, 수정되거나 워크시트에서 reapplySortConditions 메서드가 호출되는 경우에만 다시 적용됩니다. 열이나 행은 지역 내에서 정렬됩니다. "행"은 기본 정렬 유형입니다.

    다음 코드 조각은 워크시트의 셀 영역에 정렬을 적용하는 방법을 보여줍니다.

    var workbook = new Workbook(WorkbookFormat.Excel2007);
var worksheet = workbook.worksheets().add("Sheet1");

worksheet.sortSettings.sortConditions().addItem(new RelativeIndex(0), new OrderedSortCondition(SortDirection.Ascending));
ts

    워크시트 보호

    ​worksheet 개체에 대해 protect 메서드를 호출하여 워크시트를 보호할 수 있습니다. 이 메서드는 다음 사용자 작업을 제한하거나 허용할 수 있는 많은 nullable bool 매개 변수를 노출합니다.

    • 셀 편집.
    • 도형, 메모, 차트 또는 기타 컨트롤과 같은 개체 편집.
    • 시나리오 편집.
    • 데이터 필터링.
    • 셀 서식 지정.
    • 열 삽입, 삭제 및 서식 지정
    • 행 삽입, 삭제 및 서식 지정
    • 하이퍼링크 삽입.
    • 데이터 정렬.
    • 피벗 테이블의 활용.

    ​worksheet 개체에 대해 unprotect 메서드를 호출하여 워크시트 보호를 제거할 수 있습니다.

    다음 코드 조각은 위에 나열된 모든 사용자 작업을 보호하는 방법을 보여줍니다.

    var workbook = new Workbook(WorkbookFormat.Excel2007);
var worksheet = workbook.worksheets().add("Sheet1");

worksheet.protect();
ts

    워크시트 조건부 서식

    해당 워크시트의 conditionalFormats 컬렉션에 노출된 다양한 "추가" 메서드를 사용하여 worksheet 개체의 조건부 서식을 구성할 수 있습니다. 이러한 "Add" 메서드의 첫 번째 매개 변수는 조건부 형식을 적용하려는 워크시트의 string 영역입니다.

    워크시트에 추가할 수 있는 대부분의 조건부 형식에는 해당 조건부 형식의 조건이 true일 때 WorksheetCell 요소가 표시되는 방식을 결정하는 cellFormat 속성이 있습니다. 예를 들어 fill 및 font과 같이 이 cellFormat 속성에 연결된 속성을 사용하여 각각 특정 조건부 형식에서 셀의 배경 및 글꼴 설정을 결정할 수 있습니다.

    워크시트 셀의 시각화가 다르게 동작하므로 cellFormat 속성이 없는 몇 가지 조건부 형식이 있습니다. 이러한 조건부 형식은 DataBarConditionalFormat, ColorScaleConditionalFormat 및 IconSetConditionalFormat 입니다.

    Excel에서 기존 workbook 로드하는 경우 해당 workbook 로드될 때 형식이 유지됩니다. workbook Excel 파일로 저장할 때도 마찬가지입니다.

    다음 코드 예제에서는 워크시트에서 조건부 서식을 사용하는 방법을 보여줍니다.

    var workbook = new Workbook(WorkbookFormat.Excel2007);
var worksheet = workbook.worksheets().add("Sheet1");

var color = new Color();
color.colorString = "Red";

var format = worksheet.conditionalFormats().addAverageCondition("A1:A10", FormatConditionAboveBelow.AboveAverage);
format.cellFormat.font.colorInfo = new WorkbookColorInfo(color);
ts

    API 참조