스타일 기초
그리드의 각 영역에 스타일을 지정하고 싶다면 그리드 영역의 styleName 속성에 CSS class명을 지정합니다.
기본 스타일은 제공된 패키지의 realgrid-style.css 파일에 기본 스타일이 정의되어 있습니다.
기본 스타일 외에 별도로 지정할 스타일도 업무 스타일에 맞게 별도 파일(ex: style.css)에 정의해서 사용합니다.
<link href="/public/styles/realgrid-style.css" rel="stylesheet" />
<link href="/public/styles/style.css" rel="stylesheet" />
//style.css 내용
.orange-color {
background: #ffff00
}
.blue-color {
background: #0000ff
}
.cursor {
cursor: crosshair;
}
...컬럼 헤더 스타일
투자국가컬럼 헤더 배경색 변경
{
"name": "KorCountry",
"fieldName": "KorCountry",
"type": "data",
"width": "100",
"header": {
"text": "투자국가",
"styleName": "orange-color"
}
}컬럼 스타일
전화번호컬럼 데이터 셀 배경색 변경
{
"name": "Phone",
"fieldName": "Phone",
"type": "data",
"width": "130",
"header": {
"text": "전화번호"
},
"styleName":"orange-color"
},푸터 스타일
컬럼 푸터에 스타일 적용
gridView.setFooter({styleName:"orange-color"});스타일 동시 적용
카드번호컬럼 폰트 색 및 커서 스타일 적용
{
"name": "CardNumber",
"fieldName": "CardNumber",
"type": "data",
"width": "170",
"header": {
"text": "카드번호"
},
"styleName": "blue-color cursor"
}스타일 콜백
성별값에 따른 동적으로 셀 배경색 설정
{
"name": "Gender",
"fieldName": "Gender",
"type": "data",
"width": "55",
"header": {
"text": "성별"
},
styleCallback: function(grid,dataCell){
var ret = {}
ret.styleName = "orange-color"
ret.editable = false;
ret.prefix = "<";
ret.suffix = ">";
if(dataCell.value == '남'){
return ret;
}
}
}스타일 콜백에서 사용할 수 있는 속성
- suffix
- prefix
- styleName
- booleanFormat
- numberFormat
- datetimeFormat
- textFormat
- renderer
- editor
- editable
- readonly