동적 스타일
dynamicStyles로 편집여부, 동적커서, 동적편집기, 동적색상 등의 다양한 형태의 스타일을 제공 하고 있습니다.
pivot, grid, 피벗, 필터, filter
pivot, export
pivot, style, callback, styleCallback
pivot, value, getCellValue
pivot, pivotFields, getPivotFields
‘동적편집여부’ 컬럼 값에 따라 동적으로 ‘동적편집’ 컬럼의 값을 수정가능, 수정불가 상태로 지정할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
gridView.setColumnProperty("column2","dynamicStyles",function(grid, index, value) {
var ret = {};
var col1Value = grid.getValue(index.itemIndex, "field1");
if (index.column === "column2") {
switch (col1Value) {
case '편집가능' :
ret.editable = true;
//ret.readOnly = false;
break;
case '편집불가' :
ret.editable = false;
//ret.readOnly = true;
ret.background = "#ffff0000";
}
return ret;
}
});
‘동적커서설정’ 컬럼의 값에 따라 ‘동적커서’ 컬럼의 커서 속성을 변경할 수 있습니다.
1
2
3
4
5
6
gridView.setColumnProperty("column4","dynamicStyles",function(grid, index, value) {
var ret = {};
var cursor = grid.getValue(index.itemIndex, "field3");
ret["cursor"] = cursor
return ret;
});
‘편집유형설정’ 컬럼 값에 따라 편집유형을 동적으로 설정할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
gridView.setColumnProperty("column6","dynamicStyles",function(grid, index, value) {
var kind = grid.getValue(index.itemIndex, "field5");
var ret = {};
switch (kind) {
case '법인번호' : // 법인번호.
ret.editor = {
type:"text",
mask:{
editMask:"000000-000000", allowEmpty:true, includedFormat:false
}
};
break;
case '사업자번호' : // 사업자번호
ret.editor = {
type:"text",
mask:{
editMask:"000-00-00000", allowEmpty:true, includedFormat:false
}
}
}
return ret;
});
‘편집유형설정’ 컬럼의 값에 따라 동적으로 출력될 값을 설정할 수 있습니다.
1
2
3
4
5
6
7
8
gridView.setColumnProperty("column6","displayCallback", function(grid, index, value) {
var check = grid.getValue(index.itemIndex, "field5");
if (check && value) {
return check === "법인번호" ? value.substr(0,6)+'-'+value.substr(6,6) :
check === "사업자번호" ? value.substr(0,3)+'-'+value.substr(3,2)+'-'+value.substr(5,5) : value;
};
return value;
});
병합 모드에서 제한 되는 부분은 아래와 같습니다.