LookupTree

/*
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"
    }
}

//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"
    ]
}];