[]
SpreadJS에서는 decoration
객체를 사용하여 셀 또는 셀 범위에 꾸미기를 적용할 수 있습니다. 데코레이션 객체에는 모서리 폴드나 아이콘과 같은 설정을 포함할 수 있습니다.
SpreadJS는 셀의 모서리에 모서리 폴드 스타일을 설정하는 기능을 제공합니다. 모서리 폴드 기능은 셀 상태를 강조할 때 유용하며, 예를 들어 셀이 유효하지 않음을 나타내고자 할 때 사용할 수 있습니다.
IDecoration 인터페이스는 cornerFold 옵션을 제공하며, 이를 통해 접힘의 크기(size), 위치(position), 색상(color)을 설정할 수 있습니다. 이 옵션은 ICornerFold 인터페이스에서 상속되며, 해당 인터페이스는 size
, position
, color
등의 매개변수를 제공합니다.
아래 스냅샷은 셀 B6과 B8에 왼쪽 상단
위치의 주황색 corner fold 스타일이 적용된 모습을 보여줍니다.
cornerFold 옵션의 기본값은 다음과 같습니다:
크기 | 위치 | 색상 |
---|---|---|
6 | GC.Spread.Sheets.CornerPosition.leftTop | #FF3D00 |
다음 코드 구현은 ICornerFold 인터페이스와 setStyle메서드를 사용하여 corner fold 스타일을 설정하는 방법을 보여줍니다.
var style = new GC.Spread.Sheets.Style();
style.decoration = {
cornerFold: {
size: 10,
position: GC.Spread.Sheets.CornerPosition.leftTop,
color: "orange"
}
}
sheet.setStyle(5, 1, style);
SpreadJS는 GC.Spread.Sheets.Style 클래스의 icons
속성을 사용하여 셀 안 또는 셀 바깥에 아이콘을 삽입할 수 있는 아이콘 데코레이션 기능을 지원합니다.
텍스트나 값을 포함한 셀 타입에는 아이콘을 적용할 수 있지만, 체크박스나 콤보박스 같은 셀 타입에는 icons
속성이 지원되지 않습니다.
SpreadJS는 src
, width
, height
, position
등 다양한 아이콘 데코레이션 옵션을 제공합니다.
아이콘의 위치를 지정하려면 다음과 같은 IconPosition
열거형 값을 사용할 수 있습니다:
이름 | 설명 |
---|---|
| 셀 내부 왼쪽에 표시 |
| 셀 내부 오른쪽에 표시 |
| 텍스트 왼쪽에 표시 ※ 텍스트가 없으면 아이콘이 숨겨짐 |
| 텍스트 오른쪽에 표시 ※ 텍스트가 없으면 아이콘이 숨겨짐 |
| 셀 외부 왼쪽에 표시 ※ 셀이 숨겨지면 아이콘도 숨겨짐 |
| 셀 외부 오른쪽에 표시 ※ 셀이 숨겨지면 아이콘도 숨겨짐 |
다음 코드 샘플은 셀에 아이콘을 스타일링하는 방법을 보여줍니다:
//셀 왼쪽
style = new GC.Spread.Sheets.Style();
style.decoration = {
icons: [
{
src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcgOUg1TDUgNS45NjA0NmUtMDhIN0w3IDlaTTYgMTBDNi41NTIyOCAxMCA3IDEwLjQ0NzcgNyAxMUM3IDExLjU1MjMgNi41NTIyOCAxMiA2IDEyQzUuNDQ3NzIgMTIgNSAxMS41NTIzIDUgMTFDNSAxMC40NDc3IDUuNDQ3NzIgMTAgNiAxMFoiIGZpbGw9IiNFNjUyNDkiLz4KPC9zdmc+Cg==',
position: GC.Spread.Sheets.IconPosition.left
}
]
};
setIcon(1, 1, style);
참고:
leftOfText
및rightOfText
위치 값은 텍스트 셀에만 적용됩니다.현재 보기 영역을 벗어난 아이콘은 인접 열에만 영향을 줍니다.
데코레이션이 여러 개의 아이콘을 지원하는 경우, 아이콘은 위치 설정과 관계없이 나란히 표시됩니다.
셀 정렬 설정은 아이콘의 수직 정렬에 영향을 줍니다.
스타일 데코레이션 아이콘이 있는 셀은 텍스트 오버플로우가 불가능합니다.
SpreadJS 디자이너를 사용하여 셀에 아이콘을 추가하려면 다음 단계를 따르세요:
셀 선택합니다.
셀을 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 셀 서식...(Format Cells...) 옵션을 선택합니다.
스프레드시트에서 셀 서식(Format Cells) 대화 상자가 열립니다.
꾸미기(Decoration) 탭으로 이동하여 속성을 설정합니다.
추가(Add) 버튼을 클릭하여 새 아이콘 옵션을 추가하거나, src
, position
, width
, height
값을 선택하여 아이콘을 업데이트합니다.
아이콘 선택(Select Icon) 옵션을 클릭하여 아이콘의 위치를 탐색합니다.
위치(Position) 콤보박스(선택 사항)를 사용하여 위치를 지정할 수 있습니다.
너비(Width) 및 높이(Height) 스핀 버튼을 사용하여 아이콘의 너비와 높이를 조절할 수 있습니다.
삭제할 옵션을 선택합니다.
삭제(Delete) 버튼을 클릭하여 선택한 옵션을 제거합니다.