Object Type Field
ObjectType의 데이터를 표시할 수 있습니다.
기본적으로 편집이 되지 않으며 ObjectKey를 지정시 편집할 수 있습니다.
ObjectKey를 지정하면 지정된 속성값만 편집/표시 됩니다.
//데이터의 형태
[
{
"Person": {
"Name": "박영호",
"Address": "서울특별시 강서구 공항동 45-89"
},
"Gender": "남",
"Age": "71",
...
},
{
"Person": {
"Name": "조일형",
"Address": "서울특별시 중구 봉래동2가 122"
},
"Gender": "남",
"Age": "62",
...
},
...
];
//필드 설정
var fields = [
{
fieldName: "Person",
dataType: "object",
objectKey: "Name"
},
...
];
dataProvider.setFields(fields);
//컬럼 설정
var columns = [
{
name: "Person",
fieldName: "Person",
objectKey: "Name",
width: "300",
header: {
text: "이름"
}
},
...
];
gridView.setColumns(columns);
주의사항
- Object 필드 복사시 화면에 보이는 Text가 아니라 Object가 복사됩니다.
- Object 필드에 붙여넣기시 같은 Object Data만 붙여넣을 수 있습니다. 일반 Text의 경우 붙여넣을 수 없습니다.
- 하나의 Object 필드에 여러 개의 컬럼 사용시 소트 기능은 ObjectKey가 지정된 컬럼을 기준으로 실행됩니다. 예를 들어 아래와 같이 Object Field의
objectKey
속성에Name
의 지정되어 있기 때문에PersonName
컬럼과PersonAddress
컬럼은 모두이름
으로 소팅 됩니다. 이때 컬럼 필터는 사용할 수 없습니다.
하나의 Object 필드 - 두 개의 컬럼 사용예
const fields = [
{
fieldName: "Person",
dataType: "object",
objectKey: "Name"
},
...
]
const columns = [
{
name: "PersonName",
fieldName: "Person",
objectKey: "Name",
width: "150",
header: {
text: "이름"
}
},
{
name: "PersonAddress",
fieldName: "Person",
objectKey: "Address",
width: "150",
header: {
text: "주소"
}
},
]
objectCallback
객체가 2 depth 이상으로 되어 있는 값인 경우 데이터 출력을 위해 objectCallback을 사용해서 화면에 보여지도록 설정할 수 있습니다.
objectCallback 에서 반환되는 값이 그리드에 출력됩니다. data 인자값으로 해당 필드의 값을 가져옵니다.
{
name: "PersonAddress",
fieldName: "Person",
objectCallback:function(fieldName, dataRow, data){
return data.Address
},
width: "300",
header: {
text: "주소"
}
}