세포를 이용한 React

The WorksheetCell objects in an Excel worksheet is the object that holds your actual data values for the worksheet. This topic goes over the many operations that you can perform on these cells, such as accessing them and their regions by name, adding formulas and comments to the cells, and merging and formatting them.

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

You can access a WorksheetCell object or a WorksheetRegion object by calling the worksheet object’s getCell or getRegion methods, respectively. Both methods accept a string parameter that references a cell. Getting a reference to a cell is useful when applying formats or working with formulas and cell contents.

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

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에서는 개별 셀과 셀 영역에 이름을 할당할 수 있습니다. 셀이나 지역의 이름은 주소 대신 해당 셀이나 지역을 참조하는 데 사용될 수 있습니다.

The Infragistics React Excel Library supports the referencing of cells and regions by name through the getCell and getRegion methods of the worksheet object. You refer to the cell or region using the NamedReference instance that refers to that cell or region.

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

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

A comment allows you to display hints or notes for a cell when the end user’s mouse hovers over a cell. The comments display as a tooltip-like callout that contains text. The Infragistics React Excel Library allows you to add comments to a cell by setting a WorksheetCell object’s comment property.

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

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

The Infragistics React Excel Library allows you to add Microsoft Excel formulas to a cell or group of cells in a worksheet. You can do this using the WorksheetCell object’s applyFormula method or by instantiating a formula object and applying it to a cell. Regardless of the manner in which you apply a formula to a cell, you can access the formula object using the WorksheetCell object’s formula property. If you need the value, use the cell’s value property.

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

 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

Cells can have different formatting, including background color, format string, and font style. If you need a cell to have the same format as a previously formatted cell, instead of individually setting each option exposed by the WorksheetCell object’s cellFormat property, you can call the cellFormat object’s setFormatting method and pass it a cellFormat object to copy. This will copy every format setting from the first cell to the second cell. You can also do this for a row, merged cell region, or column.

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

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

The Infragistics React Excel Library allows you to customize the look and behavior of a cell. You can customize a cell by setting properties exposed by the cellFormat property of the WorksheetCell, WorksheetRow, WorksheetColumn, or WorksheetMergedCellsRegion objects.

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

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

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

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 옵션 => 저장 => 색상으로 이동하여 이 색상 대화 상자를 열 수 있습니다.

You can create all possible fill types using static properties and methods on the CellFill class. They are as follows:

NoColor - A property that represents a fill with no color, which allows a background image of the worksheet, if any, to show through.
CreateSolidFill - Returns a CellFillPattern instance which has a pattern style of Solid and a background color set to the color or WorkbookColorInfo specified in the method.
CreatePatternFill - Returns a CellFillPattern instance which has the specified pattern style and the color or WorkbookColorInfo values, specified for the background and pattern colors.
CreateLinearGradientFill - Returns a CellFillLinearGradient instance with the specified angle and gradient stops.
CreateRectangularGradientFill - Returns a CellFillRectangularGradient instance with the specified left, top, right, and bottom of the inner rectangle and gradient stops. If the inner rectangle values are not specified, the center of the cell is used as the inner rectangle.

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

CellFillPattern - A pattern that represents a cell fill of no color, a solid color, or a pattern fill for a cell. It has background color info and a pattern color info which correspond directly to the color sections in the Fill tab of the Format Cells dialog of Excel.
CellFillLinearGradient - Represents a linear gradient fill. It has an angle, which is degrees clockwise of the left to right linear gradient, and a gradients stops collection which describes two or more color transitions along the length of the gradient.
CellFillRectangularGradient - Represents a rectangular gradient fill. It has top, left, right, and bottom values, which describe, in relative coordinates, the inner rectangle from which the gradient starts and goes out to the cell edges. It also has a gradient stops collection which describes two or more color transitions along the path from the inner rectangle to the cell edges.

The following code snippet demonstrates how to create a solid fill in a 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을 통해 사용자 정의할 수 있는 기본값이 있습니다.

Colors are defined by the WorkbookColorInfo class, which is a sealed immutable class. The class has a static Automatic property, which returns the automatic color, and there are various constructors which allow you to create a WorkbookColorInfo instance with a color or a theme value and an optional tint.

The getResolvedColor method on WorkbookColorInfo allows you to determine what color will actually be seen by the user when they open the file in Excel.

If the WorkbookColorInfo represents a theme color, you must pass in a Workbook instance to the method so it can get the theme color’s RGB value from the workbook.

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

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

Excel Format Support

You can set a host of different formats on a WorksheetCell by using the cellFormat object returned by the cellFormat property of that cell. This cellFormat object enables you to style many different aspects of the cell such as borders, font, fill, alignments, and whether or not the cell should shrink to fit or be locked.

You can also access the built-in styles to Microsoft Excel 2007 using the styles collection of the workbook object. The full list of styles in Excel can be found in the Cell Styles gallery of the Home tab of Microsoft Excel 2007.

There is a special type of style on the workbook's styles collection known as the "normal" style, which can be accessed using that collection's normalStyle property, or by indexing into the collection with the name "Normal".

The normalStyle contains the default properties for all cells in the workbook, unless otherwise specified on a row, column, or cell. Changing the properties on the normalStyle will change all of the default cell format properties on the workbook. This is useful, for example, if you want to change the default font for your workbook.

You can clear the styles collection or reset it to its predefined state by using the clear and reset methods, respectively. Both of these will remove all user-defined styles, but clear will clear the styles collection entirely.

With this feature, a style property has been added to the cellFormat object. This is a reference to a WorkbookStyle instance, representing the parent style of the format. For formats of a style, this property will always be null, because styles cannot have a parent style. For row, column, and cell formats, the style property always returns the normalStyle by default.

If the style property is set to null, it will revert back to the normalStyle. If it is set to another style in the styles collection, that style will now hold the defaults for all unset properties on the cell format.

When the style property is set on a cell format, the format options included on the style are removed from the cell format. All other properties are left intact. For example, if a cell style including border formatting was created and that style was set as the cell's style, the border format option on the cell format would be removed and the cell format only includes fill formatting.

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

You can determine what would really be seen in cells by using the getResolvedCellFormat method on classes which represent a row, column, cell, and merged cell.

This method returns a cellFormat instance which refers back to the associated cellFormat on which it is based. So subsequent changes to the cellFormat property will be reflected in the instance returned from a getResolvedCellFormat call.

Merging Cells

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

When you merge cells, each cell in the region will have the same value and cell format. The merged cells will also be associated with the same WorksheetMergedCellsRegion object, accessible from their associatedMergedCellsRegion property. The resultant WorksheetMergedCellsRegion object will also have the same value and cell format as the cells.

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

In order to create a merged cell region, you must add a range of cells to the worksheet object’s mergedCellsRegions collection. This collection exposes an Add method that takes four integer parameters. The four parameters determine the index of the starting row and column (top-left most cell) and the index of the ending row and column (bottom-right most cell).

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이 됩니다.
해시 표시- 숫자의 압축된 버전을 표시할 수 없는 경우 해시(#)가 셀 너비 전체에서 반복됩니다.
빈 문자열- 해시 표시가 셀에 들어갈 수 없는 경우 빈 문자열이 표시된 셀 텍스트로 반환됩니다.

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

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

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

You can set the worksheet's displayOptions' showFormulasInCells property to have formulas be displayed in cells instead of their results, and format strings and cell widths are ignored. Text values display as if their format string were @ , non-integral numeric values display as if their format string were 0.0 and integral numeric values display as if their format string were 0 .

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

The following code snippet demonstrates the usage of the getText method to get the text as it would be displayed in Excel:

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

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