세포를 사용하여 React

Excel 워크시트의 WorksheetCell 개체는 워크시트의 실제 데이터 값을 보유하는 개체입니다. 이 항목에서는 이름으로 해당 셀과 해당 영역에 액세스하고, 셀에 수식과 설명을 추가하고, 셀을 병합하고 서식을 지정하는 등 이러한 셀에서 수행할 수 있는 다양한 작업에 대해 설명합니다.

React Using Cells Example

References

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

import { Workbook } from "igniteui-react-excel";
import { WorkbookFormat } from "igniteui-react-excel";
import { Worksheet } from "igniteui-react-excel";
import { WorksheetTable } from "igniteui-react-excel";
import { NamedReference } from "igniteui-react-excel";
import { WorksheetCellComment } from "igniteui-react-excel";
import { FormattedString } from "igniteui-react-excel";

Referencing Cells and Regions

WorksheetCell 개체 getRegion getCell 또는 WorksheetRegion 메서드를 각각 호출하여 worksheet 개체 또는 WorksheetRegion 개체에 액세스할 수 있습니다. 두 방법 모두 셀을 참조하는 문자열 매개변수를 허용합니다. 셀에 대한 참조를 얻는 것은 서식을 적용하거나 수식 및 셀 내용으로 작업할 때 유용합니다.

다음 예제 코드는 셀과 영역을 참조하는 방법을 보여줍니다.

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

//Accessing a single cell
var cell = worksheet.getCell("E2");
//Accessing a range of cells
var region = worksheet.getRegion("G1:G10");

Accessing Cells and Regions by Name

Microsoft Excel에서는 개별 셀과 셀 영역에 이름을 할당할 수 있습니다. 셀이나 지역의 이름은 주소 대신 해당 셀이나 지역을 참조하는 데 사용될 수 있습니다.

Infragistics React Excel Library는 worksheet 시트 개체의 getCell 및 getRegion 메서드를 통해 이름으로 셀 및 영역 참조를 지원합니다. 셀이나 지역을 참조하는 NamedReference 인스턴스를 사용하여 셀이나 지역을 참조합니다.

셀 또는 지역 이름 지정의 예로 다음 코드 조각을 사용할 수 있습니다.

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

var cell_reference = workbook.namedReferences().add("myCell", "=Sheet1:A1");
var region_reference = workbook.namedReferences().add("myRegion", "=Sheet1!A1:B2");

다음 코드는 위의 "myCell" 및 "myRegion" 참조에서 참조하는 셀과 지역을 가져오는 데 사용할 수 있습니다.

var cell = worksheet.getCell("myCell");
var region = worksheet.getRegion("myRegion");

Adding a Comment to a Cell

설명을 사용하면 최종 사용자가 마우스를 셀 위로 이동할 때 셀에 대한 힌트나 메모를 표시할 수 있습니다. 주석은 텍스트가 포함된 도구 설명과 같은 설명선으로 표시됩니다. Infragistics React Excel 라이브러리를 사용하면 WorksheetCell 개체의 comment 속성을 설정하여 셀에 설명을 추가할 수 있습니다.

다음 예제 코드는 셀에 주석을 추가하는 방법을 보여줍니다.

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

var cellComment = new WorksheetCellComment();
var commentText = new FormattedString("This cell has a comment.");
cellComment.text = commentText;

worksheet.rows(0).cells(0).comment = cellComment;

Adding a Formula to a Cell

Infragistics React Excel 라이브러리를 사용하면 Microsoft Excel 수식을 워크시트의 셀 또는 셀 그룹에 추가할 수 있습니다. WorksheetCell 개체의 applyFormula 메서드를 사용하거나 formula 개체를 인스턴스화하고 이를 셀에 적용하여 이 작업을 수행할 수 있습니다. 셀에 수식을 적용하는 방식에 관계없이 WorksheetCell 개체의 formula 속성을 사용하여 formula 개체에 액세스할 수 있습니다. 값이 필요한 경우 셀의 value 속성을 사용하세요.

다음 코드는 셀에 수식을 추가하는 방법을 보여줍니다.

 var workbook = new Workbook();
 var worksheet = workbook.worksheets().add("Sheet1");
 worksheet.rows(5).cells(0).applyFormula("=SUM(A1:A5)");

 //Using a Formula object to apply a formula
 var sumFormula = Formula.parse("=SUM(A1:A5)", CellReferenceMode.A1);
 sumFormula.applyTo(worksheet.rows(5).cells(0));

Copying a Cell’s Format

셀에는 배경색, 서식 문자열, 글꼴 스타일 등 다양한 서식이 적용될 수 있습니다. 이전에 서식이 지정된 셀과 동일한 형식을 갖는 셀이 필요한 경우 WorksheetCell 개체의 cellFormat 속성에 의해 노출된 각 옵션을 개별적으로 설정하는 대신 cellFormat 개체의 setFormatting 메서드를 호출하고 이를 cellFormat 개체에 전달하여 복사할 수 있습니다. 이렇게 하면 첫 번째 셀의 모든 형식 설정이 두 번째 셀에 복사됩니다. 행, 병합된 셀 영역 또는 열에 대해서도 이 작업을 수행할 수 있습니다.

다음 코드는 두 번째 열의 형식을 네 번째 열에 복사하는 방법을 보여줍니다.

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

//Format 2nd column
worksheet.columns(1).cellFormat.fill = CellFill.createSolidFill("Blue");
worksheet.columns(1).cellFormat.font.bold = true;

//Copy format of 2nd column to 4th column
worksheet.columns(3).cellFormat.setFormatting(worksheet.columns(1).cellFormat);

Formatting a Cell

Infragistics React Excel 라이브러리를 사용하면 셀의 모양과 동작을 사용자 지정할 수 있습니다. WorksheetCell, WorksheetRow, WorksheetColumn 또는 WorksheetMergedCellsRegion 개체의 cellFormat 속성에 의해 노출되는 속성을 설정하여 셀을 사용자 정의할 수 있습니다.

셀 모양의 모든 측면을 사용자 정의할 수 있습니다. 셀의 글꼴, 배경, 테두리는 물론 텍스트 정렬 및 회전도 설정할 수 있습니다. 셀의 텍스트에 대해 문자별로 다른 형식을 적용할 수도 있습니다.

형식 문자열을 할당하여 셀 값의 형식을 지정할 수도 있습니다. 허용되는 형식 문자열은 기존 형식 표준 및 형식 지정 코드를 따릅니다.

다음 코드는 숫자를 통화로 표시하도록 셀 서식을 지정하는 방법을 보여줍니다.

var workbook = new Workbook(format);
var workbook = workbook.worksheets().add("Sheet1");

worksheet.columns(2).cellFormat.formatString = "\"$\"#,##0.00";

Excel 2007 Color Model

색상 팔레트는 Microsoft Excel 2007 UI의 색상 대화 상자와 유사합니다. Excel 옵션 => 저장 => 색상으로 이동하여 이 색상 대화 상자를 열 수 있습니다.

CellFill 클래스의 정적 속성과 메서드를 사용하여 가능한 모든 채우기 유형을 만들 수 있습니다. 그것들은 다음과 같습니다:

NoColor- 색상이 없는 채우기를 나타내는 속성으로 워크시트의 배경 이미지가 있는 경우 이를 통해 표시됩니다.
CreateSolidFill- 반환 CellFillPattern 패턴 스타일이 있는 인스턴스 Solid 배경색은 color 또는 WorkbookColorInfo 메소드에 지정됩니다.
CreatePatternFill- 지정된 패턴 스타일과 배경 및 패턴 색상에 대해 지정된 color 또는 WorkbookColorInfo 값이 있는 CellFillPattern 인스턴스를 반환합니다.
CreateLinearGradientFill- 지정된 각도와 그라데이션 정지점을 사용하여 CellFillLinearGradient 인스턴스를 반환합니다.
CreateRectangularGradientFill- 내부 직사각형의 지정된 왼쪽, 위쪽, 오른쪽 및 아래쪽과 그라데이션 중지점을 사용하여 CellFillRectangularGradient 인스턴스를 반환합니다. 내부 사각형 값을 지정하지 않으면 셀의 중심이 내부 사각형으로 사용됩니다.

생성할 수 있는 다양한 채우기를 나타내는 파생 유형은 다음과 같습니다.

CellFillPattern- 무색, 단색 또는 셀의 패턴 채우기의 셀 채우기를 나타내는 패턴입니다. 여기에는 Excel 셀 서식 대화 상자의 채우기 탭에 있는 색상 섹션에 직접적으로 해당하는 배경색 정보와 패턴 색상 정보가 있습니다.
CellFillLinearGradient- 선형 그라데이션 채우기를 나타냅니다. 여기에는 왼쪽에서 오른쪽 선형 그래디언트의 시계 방향인 각도가 있으며 그래디언트 길이에 따라 두 개 이상의 색상 전환을 설명하는 그래디언트 중지 컬렉션이 있습니다.
CellFillRectangularGradient- 직사각형 그라데이션 채우기를 나타냅니다. 여기에는 그라데이션이 시작되고 셀 가장자리로 나가는 내부 직사각형을 상대 좌표로 설명하는 위쪽, 왼쪽, 오른쪽 및 아래쪽 값이 있습니다. 또한 내부 직사각형에서 셀 가장자리까지의 경로를 따라 두 개 이상의 색상 전환을 설명하는 그라데이션 정지 컬렉션도 있습니다.

다음 코드 조각은 WorksheetCell에서 단색 채우기를 만드는 방법을 보여줍니다.

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

var cellFill = CellFill.createSolidFill("Blue");
worksheet.rows(0).cells(0).cellFormat.fill = cellFill;

셀의 선형 및 직사각형 그라데이션을 사용하여 색상(Excel 셀 배경색, 테두리 색상 등)을 지정할 수 있습니다. 이러한 그라데이션이 포함된 통합 문서를 .xls 파일 형식으로 저장하고 Microsoft Excel 2007/2010에서 열면 그라데이션이 표시되지만 이러한 파일을 Microsoft Excel 2003에서 열면 셀이 처음부터 단색으로 채워집니다. 그라데이션 정지.

색상을 정의하는 방법은 다음과 같습니다.

자동 색상(WindowText 시스템 색상)
사용자 정의 RGB 색상
A theme color

RGB 또는 테마 색상을 사용하는 경우 선택적 색조를 적용하여 색상을 밝게 하거나 어둡게 할 수 있습니다. 이 색조는 Microsoft Excel 2007 UI에서 직접 설정할 수 없지만 사용자에게 표시되는 색상 팔레트의 다양한 색상은 실제로 색조가 적용된 테마 색상입니다.

각 통합 문서에는 12개의 관련 테마 색상이 있습니다. 그것들은 다음과 같습니다:

Light 1
Light 2
Dark 1
Dark 2
Accent1
Accent2
Accent3
Accent4
Accent5
Accent6
하이퍼링크
Followed Hyperlink
통합 문서가 생성될 때 Excel을 통해 사용자 정의할 수 있는 기본값이 있습니다.

색상은 봉인된 변경할 수 없는 클래스인 WorkbookColorInfo 클래스에 의해 정의됩니다. 클래스에는 자동 색상을 반환하는 정적 Automatic 속성이 있으며 색상이나 테마 값 및 선택적 색조를 사용하여 WorkbookColorInfo 인스턴스를 만들 수 있는 다양한 생성자가 있습니다.

WorkbookColorInfo의 getResolvedColor 메서드를 사용하면 사용자가 Excel에서 파일을 열 때 실제로 어떤 색상이 표시되는지 결정할 수 있습니다.

WorkbookColorInfo가 테마 색상을 나타내는 경우 통합 문서에서 테마 색상의 RGB 값을 가져올 수 있도록 Workbook 인스턴스를 메서드에 전달해야 합니다.

.xlsx와 같은 최신 파일 형식으로 저장하면 최신 색상 정보가 파일에 직접 저장됩니다. .xls와 같은 이전 파일 형식으로 저장하면 팔레트에서 가장 가까운 색상에 대한 색인이 저장됩니다. 또한 이전 형식에는 최신 색상 정보를 표시하기 위해 저장할 수 있는 향후 기능 기록이 있습니다.

Microsoft Excel 2003 및 이전 버전에서 이전 형식을 열면 이러한 향후 기능 레코드가 무시되지만 이전 파일 형식을 Excel 2007 이상에서 열면 해당 레코드를 읽고 해당 레코드의 색상 정보가 인덱스 색상을 덮어씁니다. 이전에 일반 형식 레코드에서 로드되었습니다.

Excel Format Support

해당 셀의 cellFormat 속성에서 반환된 cellFormat 개체를 사용하여 WorksheetCell에 다양한 형식을 설정할 수 있습니다. 이 cellFormat 객체를 사용하면 테두리, 글꼴, 채우기, 정렬 및 셀을 축소하거나 잠글지 여부 등 셀의 다양한 측면에 스타일을 지정할 수 있습니다.

workbook 개체의 styles 컬렉션을 사용하여 Microsoft Excel 2007에 내장된 스타일에 액세스할 수도 있습니다. Excel의 전체 스타일 목록은 Microsoft Excel 2007 홈 탭의 셀 스타일 갤러리에서 찾을 수 있습니다.

통합 문서의 styles 컬렉션에는 "일반" 스타일이라고 하는 특별한 유형의 스타일이 있습니다. 이 스타일은 해당 컬렉션의 normalStyle 속성을 사용하거나 "Normal"이라는 이름의 컬렉션에 대한 인덱싱을 통해 액세스할 수 있습니다.

normalStyle 에는 행, 열 또는 셀에 별도로 지정되지 않는 한 통합 문서의 모든 셀에 대한 기본 속성이 포함됩니다. normalStyle의 속성을 변경하면 통합 문서의 모든 기본 셀 형식 속성이 변경됩니다. 예를 들어 통합 문서의 기본 글꼴을 변경하려는 경우 유용합니다.

각각 clear 및 reset 메서드를 사용하여 styles 컬렉션을 지우거나 미리 정의된 상태로 재설정할 수 있습니다. 두 가지 모두 사용자 정의 스타일을 모두 제거하지만, clear styles 컬렉션을 완전히 지웁니다.

이 기능을 사용하면 cellFormat 객체에 style 속성이 추가되었습니다. 이는 형식의 상위 스타일을 나타내는 WorkbookStyle 인스턴스에 대한 참조입니다. 스타일 형식의 경우 스타일은 상위 스타일을 가질 수 없으므로 이 속성은 항상 null입니다. 행, 열 및 셀 형식의 경우 style 속성은 항상 기본적으로 normalStyle을 반환합니다.

style 속성이 null로 설정되면 normalStyle로 되돌아갑니다. 스타일 컬렉션의 다른 스타일로 설정된 경우 해당 스타일은 이제 셀 형식의 설정되지 않은 모든 속성에 대한 기본값을 유지합니다.

셀 서식에 style 속성을 설정하면 해당 style에 포함된 서식 옵션이 셀 서식에서 제거됩니다. 다른 모든 속성은 그대로 유지됩니다. 예를 들어 테두리 서식이 포함된 셀 스타일을 만들고 해당 스타일을 셀의 style로 설정한 경우 셀 서식의 테두리 서식 옵션이 제거되고 셀 서식에는 채우기 서식만 포함됩니다.

형식 옵션 플래그가 형식에서 제거되면 연관된 모든 속성이 설정되지 않은 값으로 재설정되므로 셀 형식의 테두리 속성은 암시적으로 기본값/설정되지 않은 값으로 재설정됩니다.

행, 열, 셀 및 병합된 셀을 나타내는 클래스에서 getResolvedCellFormat 메소드를 사용하여 셀에 실제로 표시되는 내용을 결정할 수 있습니다.

이 메소드는 기반이 되는 관련 cellFormat 다시 참조하는 cellFormat 인스턴스를 반환합니다. 따라서 cellFormat 속성에 대한 후속 변경 사항은 getResolvedCellFormat 호출에서 반환된 인스턴스에 반영됩니다.

Merging Cells

셀의 값이나 형식을 설정하는 것 외에도 셀을 병합하여 두 개 이상의 셀을 하나로 표시할 수도 있습니다. 셀을 병합하는 경우 셀은 직사각형 영역에 있어야 합니다.

셀을 병합하면 해당 영역의 각 셀은 동일한 값과 셀 형식을 갖게 됩니다. 병합된 셀은 associatedMergedCellsRegion 속성에서 액세스할 수 있는 동일한 WorksheetMergedCellsRegion 개체와도 연결됩니다. 결과 WorksheetMergedCellsRegion 개체도 셀과 동일한 값과 셀 형식을 갖게 됩니다.

지역이나 지역 내 셀의 값(또는 셀 형식)을 설정하면 모든 셀과 지역의 값이 변경됩니다. 셀 병합을 취소하면 이전에 병합된 모든 셀은 병합 취소 전의 공유 셀 형식을 유지합니다. 그러나 영역의 왼쪽 상단 셀만 공유 값을 유지합니다.

병합된 셀 영역을 만들려면 worksheet 개체의 mergedCellsRegions 컬렉션에 셀 범위를 추가해야 합니다. 이 컬렉션은 4개의 정수 매개 변수를 사용하는 Add 메서드를 노출합니다. 4개의 매개변수는 시작 행과 열(가장 왼쪽 위 셀)의 인덱스와 끝 행과 열(가장 오른쪽 아래 셀)의 인덱스를 결정합니다.

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

// Make some column headers
worksheet.rows(1).cells(1).value = "Morning";
worksheet.rows(1).cells(2).value = "Afternoon";
worksheet.rows(1).cells(3).value = "Evening";

// Create a merged region from column 1 to column 3
var mergedRegion1 =  ws.mergedCellsRegions().add(0, 1, 0, 3);

// Set the value of the merged region
mergedRegion1.value = "Day 1";

// Set the cell alignment of the middle cell in the merged region.
// Since a cell and its merged region shared a cell format, this will ultimately set the format of the merged region
worksheet.rows(0).cells(2).cellFormat.alignment = HorizontalCellAlignment.Center;

Retrieving the Cell Text as Displayed in Excel

셀에 표시되는 텍스트는 실제 셀 값 외에 형식 문자열, 셀이 포함된 열의 너비 등 여러 요소에 따라 달라집니다.

형식 문자열은 셀 값이 텍스트로 변환되는 방법과 형식화된 값과 함께 표시되어야 하는 리터럴 문자를 결정합니다. 형식 코드에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

셀에서 사용 가능한 가로 공간의 양은 값이 사용자에게 표시되는 방식에 큰 역할을 합니다.

표시되는 텍스트는 다양한 열 너비에 따라 다를 수 있습니다.

숫자를 표시하고 "일반" 또는"@"이 포함된 형식 문자열을 사용할 때 셀 너비에 맞는 형식을 찾기 위해 시도되는 다양한 형식이 있습니다. 예시 형식 목록은 다음과 같습니다.

일반 값- 공간이 무제한인 경우 숫자가 그대로 표시됩니다.
소수 자릿수 제거- 적합한 형식을 찾을 때까지 소수 자릿수가 한 번에 하나씩 제거됩니다. 예를 들어, 12345.6789 값은 12345.679, 12345.68, 12345.7 및 12346 형식이 될 때까지 다음 형식으로 축소됩니다. 첫 번째 유효 숫자가 하나만 남으면 중지됩니다. 예를 들어 0.0001234567890과 같은 값은 0.0001로 감소되었습니다.
공학용, 10진수 5자리- 숫자는 1.23457E+09 또는 1.23457E-04와 같이 0.00000E+00 형식으로 표시됩니다.
공학용, 10진수 4자리- 숫자는 1.2346E+09 또는 1.23456E-04와 같이 0.0000E+00 형식으로 표시됩니다.
공학용, 10진수 3자리- 숫자는 1.235E+09 또는 1.235E-0과 같이 0.000E+00 형식으로 표시됩니다.
공학용, 10진수 2자리- 숫자는 1.23E+09 또는 1.23E-04와 같이 0.00E+00 형식으로 표시됩니다.
공학용, 10진수 1자리- 숫자는 1.2E+09 또는 1.2E-04와 같이 0.0E+00 형식으로 표시됩니다.
공학용, 10진수 0- 숫자는 1E+09 또는 1E-04와 같이 0E+00 형식으로 표시됩니다.
반올림된 값- 첫 번째 유효 숫자가 숫자의 소수 부분에 있는 경우 값은 가장 가까운 정수 값으로 반올림됩니다. 예를 들어 값이 0.0001234567890인 경우 0으로 반올림되고 셀에 표시되는 텍스트는 0이 됩니다.
해시 표시- 숫자의 압축된 버전을 표시할 수 없는 경우 해시(#)가 셀 너비 전체에서 반복됩니다.
빈 문자열- 해시 표시가 셀에 들어갈 수 없는 경우 빈 문자열이 표시된 셀 텍스트로 반환됩니다.

숫자 값의 형식 문자열에 일반 또는 @가 포함되지 않은 경우 다음 크기 조정 단계만 있습니다: 일반 값, 해시 표시, 빈 문자열

셀에 텍스트가 사용된 경우 셀에 표시된 텍스트는 셀에서 잘렸는지 여부에 관계없이 항상 전체 값입니다.

그렇지 않은 유일한 경우는 형식 문자열에 패딩 문자가 사용되는 경우입니다. 그러면 텍스트를 위한 공간이 충분하지 않을 때 값이 모든 해시 마크로 표시됩니다.

수식이 결과 대신 셀에 표시되도록 워크시트의 displayOptions'showFormulasInCells 속성을 설정할 수 있으며 형식 문자열과 셀 너비는 무시됩니다. 텍스트 값은 형식 문자열이 @ 인 것처럼 표시되고, 비정수 숫자 값은 형식 문자열이 0.0 인 것처럼 표시되고, 정수 숫자 값은 형식 문자열이 0 인 것처럼 표시됩니다.

또한 값이 맞지 않으면 모든 해시로 표시되지 않습니다. 표시 텍스트는 완전히 표시되지 않더라도 전체 텍스트를 셀 텍스트로 반환합니다.

다음 코드 조각은 getText 메서드를 사용하여 Excel에 표시되는 텍스트를 가져오는 방법을 보여줍니다.

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

var cellText = worksheet.rows(0).cells(0).getText();