Lookup 컬럼
컬럼에 연결된 데이터 필드의 실제 값 대신 그 값과 연관된 다른 값을 셀에 표시할 수 있습니다.
values와 labels 설정
lookupDisplay
속성을 true로 지정하고 values
와 labels
속성들의 목록을 지정하면 values
값의 위치에 맞는 labels
항목이 표시됩니다.
values/labels 컬럼에 values
로 설정된 값 중 하나를 입력해 보세요.
var columns = [{
...
}, {
name: "UserName",
fieldName: "UserName",
width: "130",
sortable: false,
lookupDisplay: true,
values: ["VINET", "HANAR", "SUPRD", "VICTE", "THREE", "SEVEN"],
labels: ["<VINET>", "<HANAR>", "<SUPRD>", "<VICTE>", "<THREE>", "<SEVEN>"],
header: {
text: "Values/Labels",
}
}, {
...
}];
grid.setColumns(columns);
lookupData
DataColumn의 values와 labels의 값을 별도로 입력하지 않고 JSON형태의 데이터를 lookupData속성을 사용해서 한번에 적용할 수 있습니다.
var lookupDatas = [
{value: "VINET", label: "<VINET>"},
{value: "HANAR", label: "<HANAR>"},
{value: "SUPRD", label: "<SUPRD>"},
{value: "VICTE", label: "<VICTE>"},
{value: "THREE", label: "<THREE>"},
{value: "SEVEN", label: "<SEVEN>"}
];
var columns = [
{
name: "UserName",
fieldName: "UserName",
width: "130",
sortable: false,
lookupDisplay: true,
lookupData: lookupDatas,
//value와 label의 속성명을 바꾸고 싶은 경우 아래와 같이 사용
//lookupData: {value:"code", label:"text", list:[{code: "M", text: "매일유업"}, {code: "S", text: "서울우유"}]},
header: {
text: "lookupDatas"
},
editor: {
type: "dropdown"
},
styleName: "orange-column"
}
]
labelField 설정
해당 컬럼 셀에는 실제 값 대신 이 필드의 셀과 같은 행에 있는 labelField
의 값을 표시합니다. 아래 컬럼은 'Age'필드의 값이 표시되는게 아니라 'AgeLabel'필드의 값이 표시됩니다.
var columns = [{
...
}, {
name: "Age",
fieldName: "Age",
width: "130",
lookupDisplay: true,
labelField: "AgeLabel", //label로 사용할 field설정
header: {
text: "Label Field",
}
}, {
...
}];
grid.setColumns(columns);
Label Field컬럼 값 확인
alert(dataProvider.getFieldValues("Age"));
labelField 값 확인
alert(dataProvider.getFieldValues("AgeLabel"));
dropDown lookup 설정
values와 labels 목록은 DropDown
편집기의 lookup 목록으로 사용될 수도 있습니다.
var columns = [{
...
}, {
name: "Gender",
fieldName: "Gender",
width: "100",
sortable: false,
lookupDisplay: true,
editor: {
type: "dropdown",
dropDownCount: 2,
domainOnly: true,
values: ["Male","Female"],
labels: ["<Male>","<Female>"]
},
header: {
text: "Gender"
}
}, {
...
}];
grid.setColumns(columns);
value값 확인하기
현재 포커스 위치의 value값을 확인해보세요.
var focusIndex = gridView.getCurrent().itemIndex;
var focusField = gridView.getCurrent().fieldName;
alert(gridView.getValue(focusIndex, focusField));