스타일

그리드 스타일은 제공된 패키지의 style.css 파일에 기본 스타일이 정의되어 있습니다.

그리드에서 사용할 스타일 파일도 별도로 추가해서 사용합니다.

<link href="/public/styles/realgrid-style.css" rel="stylesheet" />
<link href="/public/styles/style.css" rel="stylesheet" />

//style.css
.orange-column {
  background: #ffff00
}

.cursor {
  cursor: crosshair;
}
...

컬럼 헤더 스타일

투자국가컬럼 헤더 배경색 변경

{
  "name": "KorCountry",
  "fieldName": "KorCountry",
  "type": "data",
  "width": "100",
  "header": {
    "text": "투자국가",
    "styleName": "orange-column"
  }
}

컬럼 스타일

전화번호컬럼 데이터 셀 배경색 변경

{
  "name": "Phone",
  "fieldName": "Phone",
  "type": "data",
  "width": "130",
  "header": {
    "text": "전화번호"
  },
  "styleName":"orange-column"
},

푸터 스타일

컬럼 푸터에 스타일 적용

gridView.setFooter({styleName:"orange-column"});

스타일 동시 적용

카드번호컬럼 폰트 색 및 커서 스타일 적용

{
  "name": "CardNumber",
  "fieldName": "CardNumber",
  "type": "data",
  "width": "170",
  "header": {
    "text": "카드번호"
  },
  "styleName": "blue-column cursor"
}

스타일 콜백

성별값에 따른 동적으로 셀 배경색 설정

{
  "name": "Gender",
  "fieldName": "Gender",
  "type": "data",
  "width": "55",
  "header": {
    "text": "성별"
  },
  styleCallback: function(grid,dataCell){
        var ret = {}
        ret.styleName = "orange-column"
        ret.editable = false;
        ret.prefix = "<";
        ret.suffix = ">";

        if(dataCell.value == '남'){
          return ret;
        }
      }
}

스타일 콜백에서 사용할 수 있는 속성

• suffix
• prefix
• styleName
• booleanFormat
• numberFormat
• datetimeFormat
• textFormat
• renderer
• editor
• editable
• readonly