사용자 지정 표 스타일 수정

SpreadJS에서는 사용자가 사용자 정의 표 스타일을 추가, 삭제, 수정하고 이러한 스타일을 표에 적용할 수 있습니다. 이러한 표 스타일을 적용하려면 표에 스타일 이름을 설정해야 합니다.

표 스타일을 관리하려면 GC.Spread.Sheets.WorkBook 클래스의 customTableThemes 속성을 사용합니다.

CustomTableThemesManager 클래스는 사용자 정의 표 테마를 관리하기 위한 다음 메서드를 제공합니다:

• all: 모든 사용자 정의 표 테마 가져오기

• get: 이름으로 특정 사용자 정의 표 테마 가져오기

• add: 스타일 객체 또는 이름을 사용하여 새 사용자 정의 표 테마 추가

• remove: 이름으로 사용자 정의 표 테마 삭제

• update: 이름 또는 스타일 객체를 사용하여 기존 사용자 정의 표 테마 업데이트

또한, GC.Spread.Sheets.WorkBook 클래스의 defaultTableTheme 메서드를 사용하면 기본 표 스타일을 효과적으로 관리하여 모든 표에서 일관된 모양과 느낌을 유지할 수 있습니다.

코드 사용 예시

다음 코드 샘플은 사용자 정의 표 테마를 관리하는 데 필요한 다양한 메서드를 보여줍니다.

1. 새 표 테마 추가

   var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
   
   // "custom0"이라는 새 표 스타일 추가
   let tableStyle = spread.customTableThemes.add("custom0");
   const firstColumnStripStyle = new GC.Spread.Sheets.Tables.TableStyle();
   firstColumnStripStyle.backColor = "#0C66E4";
   tableStyle.firstColumnStripStyle(firstColumnStripStyle);

2. 표 테마 가져오기

   // 표 스타일 가져오기
   tableStyle = spread.customTableThemes.get("custom0");

3. 표 테마 적용

   // 표에 스타일 적용
   let table = activeSheet.tables.add("table1", 1, 1, 10, 5);
   table.styleName("custom0");

   표에 스타일 이름을 설정하면, 해당 이름의 스타일이 표에 적용됩니다. 스타일 이름이 내장 스타일과 일치하면 직접 적용되며, 그렇지 않으면 사용자 정의 스타일 컬렉션에서 해당 스타일을 검색합니다. 없으면 기본 스타일이 사용됩니다.

4. 표 테마 수정

   // 표 스타일 수정
   const tableStyle = spread.customTableThemes.get("custom0");
   tableStyle.firstColumnStripStyle().backColor = "red";
   
   // 표 테마 업데이트
   spread.customTableThemes.update("custom0", new GC.Spread.Sheets.Tables.TableTheme());

5. 표 테마 삭제

   // 표 스타일 삭제
   spread.customTableThemes.remove("custom0");

6. 기본 테마 설정

   // 기본 표 스타일 설정
   spread.defaultTableTheme("custom0");

SpreadJS 디자이너 사용

SpreadJS 디자이너를 사용하여 사용자 정의 표 스타일을 포맷할 수도 있습니다. 아래 단계를 따르세요:

1. 표 디자인(TABLE DESIGN) > 표 스타일(Table Styles) 그룹에서 표 서식(Format Table) 버튼 클릭

   
   

   
   

   
   

2. 드롭다운 화살표를 클릭하고 표 스타일 새로 만들기...(New Table Style..) 옵션을 선택하여 원하는 스타일 요소를 설정하여 새 표 스타일 추가

   
   

   
   

   
   

3. 사용자가 만든 모든 표 스타일은 표 스타일 목록의 사용자 지정(Custom) 섹션에 표시됨

   
   

   
   

   
   

4. 사용자 정의 표 스타일을 마우스 오른쪽 버튼으로 클릭하여 다음과 같은 작업 수행: 적용, 수정, 복제, 삭제, 기본값으로 설정

   
   

   
   

   
   

Ask ChatGPT