동적 스타일
dynamicStyles로 편집여부, 동적커서, 동적편집기, 동적색상 등의 다양한 형태의 스타일을 제공 하고 있습니다.
‘동적편집여부’ 컬럼 값에 따라 동적으로 ‘동적편집’ 컬럼의 값을 수정가능, 수정불가 상태로 지정할 수 있습니다.
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;
});
병합 모드에서 제한 되는 부분은 아래와 같습니다.