lookuptree를 이용한 2단계 dropDown리스트
Q.
간단한 2단계 dropDown리스트는 어떻게 구현하나요?
A.
동적으로 가져오는 것이 아닌 정적으로 구성된 룩업트리예제는 아래와 같습니다.
주석 부분을 참고하시기 바랍니다.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>룩업샘플 2단계</title> <script type="text/javascript" src="./scripts/jszip.min.js"></script> <script type="text/javascript" src="./scripts/jquery-2.1.1.js"></script> <script type="text/javascript" src="./scripts/realgridjs-lic.js"></script> <script type="text/javascript" src="./scripts/realgridjs_eval.1.1.27.min.js"></script> <script type="text/javascript" src="./scripts/realgridjs-api.1.1.27.js"></script> <script type="text/javascript"> var gridView; var dataProvider; window.onload = function () { RealGridJS.setRootContext("scripts"); dataProvider = new RealGridJS.LocalDataProvider(); gridView = new RealGridJS.GridView("realgrid"); gridView.setDataSource(dataProvider); dataProvider.setOptions({ datetimeFormat: "yyyy/MM/dd" }); setFields(dataProvider); setColumns(gridView); setLookups(gridView); //코드형태로 값이 넘어옴. rows = [ ["O", "O1"], ["M", "M1"], ["O", "O2"], ["O", "O3"], ["M", "M2"], ["M", "M3"], ["O", "O3"] ]; dataProvider.setRows(rows); gridView.onCellEdited = function (grid, itemIndex, dataRow, field) { var fieldName = dataProvider.getOrgFieldName(field); if (fieldName == "field1") { grid.setValue(itemIndex, "field2", ""); }; } }; function setLookups(grid) { grid.setLookups([{ id: "type1", levels: 2, //모든 경우의 수를 나열 keys: [ ["O", "O1"], ["O", "O2"], ["O", "O3"], ["M", "M1"], ["M", "M2"], ["M", "M3"], ], //경우의 수에 따른 표시값 설정 values: [ ["3분카레"], ["참치"], ["불고기피자"], ["우유"], ["바이오딸기"], ["상하치즈"] ] }]); } function setFields(provider) { var fields = [{ fieldName: "field1" }, { fieldName: "field2" }]; provider.setFields(fields); } function setColumns(grid) { 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" ] }]; grid.setColumns(columns); } </script> </head> <body> <div id="realgrid" style="width:80%; height:505px;"></div> </body> </html>