컬럼 동적 스타일
컬럼 동적 스타일은 styleCallback이 지정된 컬럼에만 값에 따라 스타일이 적용됩니다.
자신의 컬럼 셀 값 참조
값이 "남"인 경우에 오렌지 색으로 표시.
var columns = [
...생략...
{
name: "Gender",
fieldName: "Gender",
type: "data",
width: "55",
header: {
text: "성별",
styleName: "orange-column"
},
styleCallback: function(grid, dataCell){
var ret = {}
if(dataCell.value == '남'){
ret.styleName = "orange-column"
}
return ret;
}
},
...생략...
];
gridView.setColumns(columns);
다른 컬럼 셀 값을 참조
성별 컬럼의 값이 "남"이고 나이 컬럼의 값이 60~70인 경우 오렌지색, 편집불가 처리
var columns = [
...생략...
{
name: "Age",
fieldName: "Age",
type: "data",
width: "55",
header: {
text: "나이",
styleName: "orange-column"
},
styleCallback: function(grid, dataCell){
var ret = {}
var gender = grid.getValue(dataCell.index.itemIndex, "Gender")
if( (gender == '남') && (dataCell.value >= 50 && dataCell.value <= 60)){
ret.styleName = "orange-column";
ret.editable = false;
}
return ret;
}
},
...생략...
];
gridView.setColumns(columns);