Lookup 컬럼

컬럼에 연결된 데이터 필드의 실제 값 대신 그 값과 연관된 다른 값을 셀에 표시할 수 있습니다.
dropdown 편집기(selectbox)에 관련된 내용은 드롭다운 편집기를 살펴보시기 바랍니다.

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",
        "RATTC",
        "WARTH"
    ],
    labels: [ 
        "Vins et alcools Chevalier",
        "Hanari Carnes",
        "Suprêmes délices",
        "Victuailles en stock",
        "Rattlesnake Canyon Grocery",
        "Wartian Herkku" 
    ],
    header: {
        text: "Values/Labels",
        styleName: "orange-column"
    }
}, {
	...
}];
 
grid.setColumns(columns);

lookupData

DataColumn의 values와 labels의 값을 별도로 입력하지 않고 JSON형태의 데이터를 lookupData속성을 사용해서 한번에 적용할 수 있습니다.

var lookupDatas = [
    {value: "VINET", label: "Vins et alcools Chevalier"},
    {value: "HANAR", label: "Hanari Carnes"},
    {value: "SUPRD", label: "Suprêmes délices"},
    {value: "VICTE", label: "Victuailles en stock"},
    {value: "RATTC", label: "Rattlesnake Canyon Grocery"},
    {value: "WARTH", label: "Wartian Herkku"}
];
 
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",
            styleName: "orange-column"
        }
    }
]

labelField 설정

해당 컬럼 셀에는 실제 값 대신 이 필드의 셀과 같은 행에 있는 labelField에 지정된 필드 값을 표시합니다. 아래 'Age'컬럼은 '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"));

value값 확인하기

현재 포커스 위치의 value값을 확인해보세요.

var focusIndex = gridView.getCurrent().itemIndex;
var focusField = gridView.getCurrent().fieldName;
alert(gridView.getValue(focusIndex, focusField));

셀 병합 툴팁