SMART datagrid v1.4 > Examples

Back  Forward

Alternate Row Colors  Example

그리드행의 배경색을 번갈아 표시해서 가독성을 높일 수 있다. 데이터루디 그리드에서는 어플리케이션 상황에 맞게 요구 사항을 구현할 수 있도록 몇 가지 방법을 제공한다. 먼저 데이터셀 수준에서 처리하는 방법들을 알아본 후, 데이터행 수준에서 렌더링하는 방법을 설명한다. 

1. 셀 동적 스타일

GridBody.rowDynamicStyles를 이용해서 행 번호에 따라 데이터셀의 배경색을 다르게 할 수 있다. rowDynamicStyles는 한 행의 모든 데이터셀에 똑 같이 적용되는 동적 스타일로, 그리드 렌더링 시점에 행 별로 한 번씩 스타일 속성 값들이 결정된다. 

Code -1
    grid.body().setRowDynamicStyles([{
        expression: 'row % 2',
        styles: { background: '#100000ff' }
    }]);
Grid - 1
rows

"수량" 컬럼은 ignoreRowDynamicStyles 속성을 true로 지정해서 컬럼 스타일에서 지정한 색상으로 표시되고 있다. 

 


또, GridBody.cellDynamicStyles를 이용해서 행 번호에 따라 데이터셀의 배경색을 다르게 할 수 있다. cellDynamicStyles는 rowDynamicStyles와 마찬가지로 한 행의 모든 데이터셀에 똑 같이 적용되는 동적 스타일이지만, 그리드 렌더링 시점에 셀마다 수식을 계산해서 스타일 값들을 결정한다. rowDynamicStyles로 구현할 수 있는 상황이라면, cellDynamicStyles를 이용할 필요가 없다. 

Code -2
    grid.body().setCellDynamicStyles([{
        expression: 'row % 2',
        styles: { background: '#100000ff' }
    }]);
Grid - 2
rows

"수량" 컬럼은 ignoreDefaultDynamicStyles 속성을 true로 지정해서 컬럼 스타일에서 지정한 색상으로 표시되고 있다. 

 

컬럼의 DataColumn.dynamicStyles를 이용해서도 동일하게 구현할 수 있다. 하지만, 모든 컬럼에 대해 동적 스타일을 지정해야 한다. 

2. 행 스타일

데이터셀들이 그려지기 전에 셀들이 포함된 그리드행이 먼저 그려지게 되는데, 그리드행의 스타일을 설정해서 바탕색을 구분시킬 수 있다. 셀 동적 스타일들을 이용하는 것보다 성능 좋게 실행되므로, 가능하면 이 방식대로 구현해야 한다. 

먼저, 기본 행 스타일팔레트를 이용해서 구현한다. 

Code -3
    // 팔레트를 등록한다.
    grid.loadPalettes([{
        name: 'p01',
        fills: [null, '#080000ff']
    }]);
    
    // 배경색으로 팔레트 항목을 설정한다.
    grid.body().setRowStyles({
        background: 'p(p01:row)'
    });
Grid - 3
rows

"수량" 컬럼의 셀들이 그려진 결과가 위 셀 동적 스타일 예제와 다른 것에 주의한다. 행이 그려진 위에 반투명의 셀이 그려지므로 겹쳐진 색으로 표시되고 있다. 

기본 행 스타일 외에 행 범위별로 스타일을 지정할 수도 있다. 

Code -4
    grid.body().setRowRangeStyles({
        'row % 2': { background: '#10000080' }
    });
Grid - 4
rows

위 두 가지 방식으로 이용하면 코드 없이도 다양한 방식으로 바탕색 구분하기를 구현할 수 있다. 예를 들어, 아래 처럼 3행씩 묶어서 구분 표시한다. 

Code -5
    grid.body().setRowRangeStyles({
        '(row div 3) % 2': { background: '#10000080' }
    });
Grid - 5
rows

rowRangeStyles 도움말 토픽을 참조한다. 


소스보기 JSP 

See Also
GridBody.rowStyles
GridBody.rowDynamicStyles
GridColumn.styles
GridRowStyles
GridStyles
동적 스타일 개요
Expression 개요
Examples
Row Dynamic Styles
Row Styles