SMART datagrid v1.4 > Examples

Back  Forward

Row Styles  Example

Row 스타일은 Column 스타일과 마찬가지로, 특정 데이터행들의 스타일 속성들을 실행 시간 데이터셀 값과 상관없이 고정적으로 지정한다. 다만, 데이터행들은 무수히 많을 수 있고 실행 중 삭제되거나 추가될 수 있으므로, 모든 데이터행들에 대해 스타일셋을 미리 지정하는 것은 불가능하다. 

SMART datagrid는 아래 코드에서 예시한대로 두 가지 방식으로 행별 스타일셋을 지정할 수 있도록 한다. 

Code -1
    grid.body().setRowRangeStyles({
        '0': { background: '#10ff0000' },
        '1': { background: '#20ff0000' },
        '2': { background: '#30ff0000' },
        'rows': [{
            'range': 'row % 2 == 1',
            'styles': {
                'background': '#08000000'
            }
        }, {
        }] 
    });
Grid - 1
rows

GridBase.bodyrowStyles로 행별 스타일셋을 지정한다. 변하지 않을 고정 데이터행이라면 행번호를 기준으로 설정하거나, rows 속성에 range 수식으로 지정되는 행 그룹별 스타일셋을 설정할 수 있다. range 수식에는 데이터행 번호에 해당하는 "row" 변수를 사용할 수 있다. 

Row 스타일은 렌더링 시에 컬럼 스타일을 포함해 다른 모든 동적 스타일들 보다 먼저 적용된다. 즉, 적용 우선 순위가 가장 낮아서 다른 스타일들에 의해 overwrite된다. 홀짝 행을 구분하는 등, 데이터셀 값들과 상관없이 행들을 구분해서 표시할 때 유용하게 사용할 수 있다. 


소스보기 JSP 

See Also
GridBody.rowStyles
GridBody.rowDynamicStyles
GridColumn.styles
GridBase.body
GridRowStyles
GridStyles
동적 스타일 개요
Expression 개요
Examples
행 색상 번갈아 표시하기
Row Dynamic Styles