셀 꾸미기

SpreadJS에서는 decoration 객체를 사용하여 셀 또는 셀 범위에 꾸미기를 적용할 수 있습니다. 데코레이션 객체에는 모서리 폴드나 아이콘과 같은 설정을 포함할 수 있습니다.

모서리 폴드 설정

SpreadJS는 셀의 모서리에 모서리 폴드 스타일을 설정하는 기능을 제공합니다. 모서리 폴드 기능은 셀 상태를 강조할 때 유용하며, 예를 들어 셀이 유효하지 않음을 나타내고자 할 때 사용할 수 있습니다.

IDecoration 인터페이스는 cornerFold 옵션을 제공하며, 이를 통해 접힘의 크기(size), 위치(position), 색상(color)을 설정할 수 있습니다. 이 옵션은 ICornerFold 인터페이스에서 상속되며, 해당 인터페이스는 size, position, color 등의 매개변수를 제공합니다.

아래 스냅샷은 셀 B6과 B8에 왼쪽 상단 위치의 주황색 corner fold 스타일이 적용된 모습을 보여줍니다.

cornerFold 옵션의 기본값은 다음과 같습니다:

다음 코드 구현은 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); 

디자이너 사용 

SpreadJS 디자이너를 사용하여 셀에 아이콘을 추가하려면 다음 단계를 따르세요:

1. 셀 선택합니다.

2. 셀을 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 셀 서식...(Format Cells...) 옵션을 선택합니다.

   스프레드시트에서 셀 서식(Format Cells) 대화 상자가 열립니다.

   꾸미기(Decoration) 탭으로 이동하여 속성을 설정합니다.

아이콘 옵션 추가/업데이트

1. 추가(Add) 버튼을 클릭하여 새 아이콘 옵션을 추가하거나, src, position, width, height 값을 선택하여 아이콘을 업데이트합니다.

   
   

2. 아이콘 선택(Select Icon) 옵션을 클릭하여 아이콘의 위치를 탐색합니다.

   
   

3. 위치(Position) 콤보박스(선택 사항)를 사용하여 위치를 지정할 수 있습니다.

   
   

4. 너비(Width) 및 높이(Height) 스핀 버튼을 사용하여 아이콘의 너비와 높이를 조절할 수 있습니다.

   
   

아이콘 옵션 삭제

1. 삭제할 옵션을 선택합니다.

   
   

2. 삭제(Delete) 버튼을 클릭하여 선택한 옵션을 제거합니다.