셀 범위 스타일링

셀 범위 스타일링

FlexGridStyle 클래스는 셀 범위에 인라인 스타일 또는 클래스 기반 CSS 스타일을 적용할 수 있는 applyStyle 메서드를 제공합니다. 이 메서드는 사용자가 특정 셀 범위에 적용할 스타일을 지정할 수 있게 합니다.

문법:

applyStyle(rng: CellRange, style: Partial<CSSStyleDeclaration>, panel?: GridPanel, inline?: boolean): void;

코드 예제:

이 예제에서는 applyStyle 메서드가 지정된 셀 범위에 클래스 기반 CSS를 적용합니다. 여기서 inline 매개변수는 'false'로 설정되어 있어 스타일 객체가 CSS 클래스로 변환되어 문서에 추가됩니다. 그러나 기본적으로 applyStyle 메서드의 inline 매개변수 값은 true입니다.

  let cssObject = { "background-color": "yellow !important", "font-size" : '10px' };
  flexGridStyle.applyStyle(new CellRange(3,1,3,2), cssObject, theGrid.cells, false);

CSS 전환

FlexGrid에서는 FlexGridStyle 클래스의 toggleClass 메서드를 사용하여 그리드 셀에 특정 CSS 클래스를 추가하거나 제거할 수 있습니다. 이 메서드는 제공된 셀 범위에서 지정된 CSS 클래스 이름을 토글할 수 있게 해줍니다.

문법:

toggleClass(rng: CellRange, className: string, panel?: GridPanel, addOrRemove?: boolean)

코드 예제:

//Add the class name
gridStyle.toggleClass(new wjGrid.CellRange(0,0,2,1), 'myStyle1', theGrid.cells, true);
//Remove the class name
gridStyle.toggleClass(new wjGrid.CellRange(0,0,2,1), 'myStyle1', theGrid.cells, false);
//Toggle the class name
gridStyle.toggleClass(new wjGrid.CellRange(0,0,2,1), 'myStyle1');

스타일 제거

FlexGridStyle 클래스는 스타일을 제거하는 다음과 같은 메서드를 제공합니다:

removeStyle – 지정된 셀 범위에서 특정 CSS 스타일을 제거합니다. 아래 코드를 참고하세요.

문법:

removeStyle(rng: CellRange, style: string | Partial<CSSStyleDeclaration>, panel?: GridPanel)

코드 예제:

flexGridStyle.removeStyle(new CellRange(10,1,11,2), "testClassGreen");

clearAllStyles – 지정된 셀 범위 또는 전체 그리드에서 적용된 모든 스타일을 제거합니다. 아래 코드를 참조하세요.

문법:

clearAllStyles(): void; //To clear all styles

clearAllStyles(rng: CellRange, panel?: GridPanel): void; //To clear the styles in the cell range

코드 예제:

//To clear all styles
flexGridStyle.clearAllStyles();

//To clear styles in the cell range
flexGridStyle.clearAllStyles(new CellRange(10,1,11,2))

제한사항

• applyStyle 메서드를 사용하여 CSS 스타일을 추가하고 스타일에 'background-color'가 지정되면, 이는 FlexGrid의 선택 스타일을 덮어쓰게 되어 셀이 선택되지 않은 것처럼 보입니다.

• applyStyle 메서드를 사용하여 스타일을 적용할 때 'inline' 매개변수가 'false'로 설정되면, 이는 같은 셀에 대해 toggleClass 메서드를 사용하여 적용된 스타일을 덮어쓰게 됩니다.