스타일(Style)

동적 스타일

동적 스타일은 QCELL 그리드 내에서 셀, 행, 열 등의 요소에 대해 사용자의 상호작용 또는 특정 조건에 따라 실시간으로 스타일(CSS)을 적용/제거하는 기능입니다.
이를 통해 보다 직관적이고 반응적인 사용자 인터페이스를 구현할 수 있습니다.

1️⃣ 컬럼 단위 스타일

setColStyle(col, style, typeopt) 특정 열(column) 에 CSS 스타일을 동적으로 적용하며, "컬럼 단위 스타일"은 "셀 단위 스타일"보다 우선순위가 낮습니다.

qcell.setColStyle(3, {"background-color" : "red", "border-color" : "red"});
qcell.setColStyle(3, {"font-weight" : "bold"}, "data");

영역 구분 ("all" | "header" | "data")

removeColStyle(col, typeopt) 특정 열에 적용된 스타일을 제거합니다.

qcell.removeColStyle(3);
qcell.removeColStyle(3, "data");

영역 구분 ("all" | "header" | "data")

2️⃣ 로우 단위 스타일

setRolStyle(row, style, typeopt) 특정 행(row) 에 스타일을 동적으로 적용합니다.

qcell.setRolStyle(3, {"background-color" : "red", "border-color" : "red"});
qcell.setRolStyle(3, {"font-weight" : "bold"}, "data");

영역 구분 ("all" | "header" | "data")

removeRowStyle(row, typeopt) 지정된 행의 스타일을 제거합니다.

qcell.removeRowStyle(3);
qcell.removeRowStyle(3, "data");

영역 구분 ("all" | "header" | "data")

3️⃣ 셀 단위 스타일

getCellStyle(row, col) 해당 셀에 적용된 스타일 정보를 반환하며, 컬럼/로우 스타일이 적용되어 있더라도 셀 스타일만 반환합니다.

qcell.getCellStyle(3, 5);

setCellStyle(row, style, typeopt) 지정된 셀 하나에 스타일을 적용합니다.

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

setCellStyles(firstrow, firstcol, lastrow, lastcol, style) 지정한 셀 범위 전체에 동일한 스타일을 일괄 적용합니다.

qcell.setCellStyles(3, 5, 10, 7, {"background-color": "red", "border-color": "red !important"});

removeCellStyle(row, col) 단일 셀에 적용된 스타일을 제거합니다.

qcell.removeCellStyle(3, 5);

removeCellStyles(firstrow, firstcol, lastrow, lastcol) 지정한 범위의 셀들에 적용된 스타일을 제거합니다.

qcell.removeCellStyles(3, 5, 10, 7);

#

4️⃣ 스타일 초기화

clearCellStyles() 모든 셀 단위 스타일을 초기화합니다.

qcell.clearCellStyles();

clearDynamicStyles() 셀, 컬럼, 행 등 모든 동적 스타일 (컬럼/로우/반복행/하이라이트 포함) 을 초기화합니다.

qcell.clearDynamicStyles();

#

스타일 우선순위

동적으로 적용된 스타일은 아래 순서대로 우선 적용됩니다

틀고정영역 스타일
↓
반복행 스타일
↓
컬럼 스타일 = 행 스타일 = 셀 스타일
↓
선택(Selection) 스타일
↓
포커스(Focus) 스타일

같은 셀에 여러 스타일이 적용되면, 이 우선순위 기준으로 나중 우선순위 스타일이 화면에 표시됩니다.

---