LookupTree

컬럼에 연결된 데이터 필드의 실제 값 대신 그 값과 연관된 다른 값을 셀에 표시합니다. 보통 상위 컬럼 값에 따라 자기 컬럼의 dropDown 목록이 변경되는경우 사용합니다.

LookupTree 설정

setLookups나 addLookupSource 함수를 사용해서 lookup tree에서 사용할 lookup source들을 등록합니다. 등록된 lookup source의 id인 area2code, area3code를 컬럼의 lookupSourceId속성에 설정하고 lookupKeyFields에 참조 키값으로 사용될 필드의 목록을 설정해야 합니다.

/*
gridView.setLookups([{
    id: "area2code",
    levels: 2,
    keys: [
        ["11", "11010"], //"종로구"
        ["21", "21110"], //"금정구"
        ...
    ],
    //keys 값이 일치하는 값으로 표시
    values: [ 
        "종로구", 
        "금정구",
        ...
    ]
}]);
*/

//위의 주석 형태로 값을 가져오기 어려운 경우 아래와 같이 데이터를 가져와서 처리
var area1codes = {id:"area1codeId", levels:1, keys: [], values: []};
var area2codes = {id:"area2codeId", levels:2, tags: [], keys: [], values: []};
var area3codes = {id:"area3codeId", levels:3, tags: [], keys: [], values: []};

//데이터 샘플 구성
var areacodes = [
  {"area1code":"11","area1name":"서울특별시","area2code":"11010","area2name":"종로구","area3code":"1101053","area3name":"사직동"},
  {"area1code":"11","area1name":"서울특별시","area2code":"11010","area2name":"종로구","area3code":"1101054","area3name":"삼청동"},
  {"area1code":"11","area1name":"서울특별시","area2code":"11010","area2name":"종로구","area3code":"1101055","area3name":"부암동"},
  ...
];

//lookupTree 채우기 설정
for (var i = 0, cnt = areacodes.length; i < cnt ; i++) {
    var codes = areacodes[i];
    if (area1codes.keys.indexOf(codes.area1code) < 0) {
        area1codes.keys.push(codes.area1code);
        area1codes.values.push(codes.area1name);
    }
    if (area2codes.tags.indexOf(codes.area2code) < 0) {
        area2codes.tags.push(codes.area2code);
        area2codes.keys.push([codes.area1code, codes.area2code]);
        area2codes.values.push(codes.area2name);
    }
    if (area3codes.tags.indexOf(codes.area3code) < 0) {
        area3codes.tags.push(codes.area3code);
        area3codes.keys.push([codes.area1code, codes.area2code, codes.area3code]);
        area3codes.values.push(codes.area3name);
    }
}

gridView.addLookupSource(area2codes);
gridView.addLookupSource(area3codes);

//컬럼 설정
{
    name:"area1lookup", 
    fieldName:"area1code", 
    header:{
        text:"시 도"
    }, 
    width:200,
    sortByLabel:true, 
    lookupDisplay:true, 
    values:area1codes.keys, 
    labels:area1codes.values,
    editor:{
        type:"dropdown"
    }
},
{
    name:"area2lookup", 
    fieldName:"area2code", 
    header:{
        text:"시 군 구"
    }, 
    lookupDisplay:true, 
    lookupSourceId:"area2codeId", 
    lookupKeyFields:["area1code","area2code"],//참조 키 필드값
    editor:{
        type:"dropdown"
    }
},
{
    name:"area3lookup", 
    fieldName:"area3code", 
    header:{
        text:"읍 면 동"
    }, 
    lookupDisplay:true, 
    lookupSourceId:"area3codeId", 
    lookupKeyFields:["area1code","area2code","area3code"],//참조 키 필드값
    editor:{
        type:"dropdown"
    }
}

setLookups를 사용한 LookupTree 설정

//lookup설정
function setLookups(grid) {
    grid.setLookups([{
        id: "type1",
        levels: 2,
        //모든 경우의 수를 나열
        keys: [
            ["O", "O1"],
            ["O", "O2"]
            ["O", "O3"],
            ["M", "M1"],
            ["M", "M2"],
            ["M", "M3"],
        ],
        //경우의 수에 따른 표시값 설정
        values: [
            ["3분카레"],    //["O", "O1"]
            ["참치"],      //["O", "O2"]
            ["불고기피자"],  //["O", "O3"]
            ["우유"],      //["M", "M1"],
            ["바이오딸기"],  //["M", "M2"]
            ["상하치즈"]    //["M", "M3"]
        ]
    }]);
}

//컬럼설정
var columns = [{
    name: "column1",
    fieldName: "field1",
    width: 150,
    header: {
        text: "제조사"
    },
    styles: {
        textAlignment: "center"
    },
    lookupDisplay: true,
    //1단계의 경우 바로 values, labels에 설정
    values: ["O","M"],
    labels: ["오뚜기","매일유업"],
    editor:{
      type: "dropdown"
    }
}, {
    name: "column2",
    fieldName: "field2",
    width: 150,
    header: {
        text: "제품명"
    },
    styles: {
        textAlignment: "center"
    },
    editor:{
        type:"dropdown"
    },
    lookupDisplay: true,
    //위의 setLookups에서 설정한 id 지정
    lookupSourceId: "type1",
    lookupKeyFields: [
        "field1",
        "field2"
    ]
}];