스타일(Style)

동적 스타일

동적 스타일은 웹 페이지에서 요소의 스타일을 동적으로 변경하는 것을 말합니다. 이를 통해 사용자의 상호작용에 따라 페이지가 동적으로 변화하며 더욱 흥미로운 사용자 경험을 제공할 수 있습니다.

Step 1: 컬럼 단위 스타일

setColStyle(col, style, typeopt) 동적으로 필요한 시점에 지정한 컬럼에 "컬럼 단위 스타일"을 설정하는 API 이며, "컬럼 단위 스타일"은 "셀 단위 스타일"보다 우선순위가 낮습니다.

• QCell1.setColStyle(3, {"background-color" : "red", "border-color" : "red"});
• QCell1.setColStyle(3, {"font-weight" : "bold"}, "data"); 영역 구분 ("all" | "header" | "data")

removeColStyle(col, typeopt) 동적으로 지정한 컬럼에 "컬럼 단위 스타일"을 제거하는 API입니다.

• QCell1.setColStyle(3, {"background-color" : "red", "border-color" : "red"});
• QCell1.setColStyle(3, {"font-weight" : "bold"}, "data"); 영역 구분 ("all" | "header" | "data")

Step 2: 로우 단위 스타일

setRolStyle(row, style, typeopt) 동적으로 필요한 시점에 지정한 로우에 "로우 단위 스타일"을 설정하는 API 입니다.

• QCell1.setRowStyle(3, {"background-color" : "red", "border-color" : "red"});
• QCell1.setRowStyle(3, {"font-weight" : "bold"}, "header"); 영역 구분 ("all" | "header" | "data")

removeRowStyle(row, type) 동적으로 필요한 시점에 지정한 로우에 "로우 단위 스타일"을 제거하는 API입니다.

• QCell1.removeRowStyle(3);
• QCell1.removeRowStyle(3, "header"); 영역 구분 ("all" | "header" | "data")

Step 3: 셀 단위 스타일

getCellStyle(row, col) 지정한 인덱스의 셀에 설정된 "셀 단위 스타일" 정보를 반환하는 API 입니다. ("컬럼 단위 스타일"이 함께 설정된 경우라도 "셀 단위 스타일" 정보만 반환합니다.)

• QCell1.getCellStyle(3, 5);
  

setCellStyle(row, style, typeopt) 동적으로 필요한 시점에 지정한 셀에 "셀 단위 스타일"을 설정하는 API 입니다.

• QCell1.setCellStyle(3, 5, {"background-color" : "red", "border-color" : "red !important"});

setCellStyles(firstrow, firstcol, lastrow, lastcol, style) 동적으로 필요한 시점에 지정한 범위 내의 셀들에 "셀 단위 스타일"을 설정하는 API 입니다.

• QCell1.setCellStyles(3, 5, 10, 7, {"background-color" : "red", "border-color" : "red"});

removeCellStyle(row, col) 지정한 셀에 설정된 "셀 단위 스타일"을 제거하는 API 입니다.

• QCell1.removeCellStyle(3, 5);

removeCellStyles(firstrow, firstcol, lastrow, lastcol) 지정한 범위 내의 셀들에 설정된 "셀 단위 스타일"을 제거하는 API를 제공합니다.

• QCell1.removeCellStyles(3, 5, 10, 7);

# Step 3: 스타일 초기화

clearCellStyles() 적용된 모든 "셀 단위 스타일"을 제거하는 API 입니다.

• QCell1.clearCellStyles();
  

clearDynamicStyles() QCELL 객체 생성 이후 적용된 모든 스타일 변경사항을 초기화하는 API입니다. ("컬럼 단위 스타일", "셀 단위 스타일", "hightlightrepeat")을 초기화 합니다

• QCell1.clearCellStyles();
  

# 동적 스타일 적용 우선 순위

스타일을 동적으로 적용 시키는 api 중, 우선적으로 반영되어 화면에 표시하는 스타일 순서입니다.
틀고정영역 스타일 < 반복행 스타일 < 컬럼 스타일 = 행 스타일 = 셀 스타일 < 선택 스타일 < 포커스 스타일

---