Axboot 신규화면 만들기 4 - Detail 내역 컬럼 콤보박스 만들기(DB연동)

앞에 "제품정보"에서 "원산지"항목을 DB공통코드와 연동하여 콤보박스로 만드는 방법에 대해 설명하겠음.

1. 공토통코드관리에 원산지 추가

   - 아래 이미지와 같이 한국,미국,일본 원산지 항목을 추가한다.

   - 분류코드 : ORIGIN

   - 분류명 : 원산지

   - 코드는 각각 : KR, US, JP 로 입력

   - 코드값에 각각 : 한국,미국,일본 을 입력

   - 정렬 : 원하는 정렬순으로 숫자를 입력한다.

   - 사용여부 : 모두체크

2. javascript 수정

 - 앞에서 만든 webapp/assets/js/view/shopmng/product.js 를 수정한다.

var fnObj = {}; var ACTIONS = axboot.actionExtend(fnObj, {     PAGE_SEARCH: function (caller, act, data) {         axboot.ajax({             type: "GET",             url: ["product"],             data: caller.searchView.getData(),             callback: function (res) {                 caller.gridView01.setData(res);             }         });         return false;     },     PAGE_SAVE: function (caller, act, data) {         var saveList = [].concat(caller.gridView01.getData("modified"));         saveList = saveList.concat(caller.gridView01.getData("deleted"));         axboot.ajax({             type: "PUT",             url: ["product"],             data: JSON.stringify(saveList),             callback: function (res) {                 ACTIONS.dispatch(ACTIONS.PAGE_SEARCH);                 axToast.push(LANG("onsave"));             }         });     },     ITEM_ADD: function (caller, act, data) {         caller.gridView01.addRow();     },     ITEM_DEL: function (caller, act, data) {         caller.gridView01.delRow("selected");     } }); var CODE = {};  //추가 // fnObj 기본 함수 스타트와 리사이즈 fnObj.pageStart = function () {     var _this = this;       axboot         .call({             type: "GET", url: "/api/v1/commonCodes", data: {groupCd: "ORIGIN"},             callback: function (res) {                 var originList = [];                 res.list.forEach(function (n) {                 originList.push({                                 //여기서 CD, NM의 문자를 사용한 이유는 아래 gridView의 원산지의                                 // optionValue와 optionText를 CD와 NM으로 사용했기 때문이다.                 CD: n.code, NM: n.name + "(" + n.code + ")"                                             });                 });                 this.originList = originList;                 //alert(JSON.stringify(this.originList));             }         })         .done(function () {             CODE = this; // this는 call을 통해 수집된 데이터들. //위쪽 추가             _this.pageButtonView.initView();  // this --> _this 로 변경             _this.searchView.initView();  // this --> _this 로 변경             _this.gridView01.initView();  // this --> _this 로 변경             ACTIONS.dispatch(ACTIONS.PAGE_SEARCH);         });  //추가 }; fnObj.pageResize = function () { }; fnObj.pageButtonView = axboot.viewExtend({     initView: function () {         axboot.buttonClick(this, "data-page-btn", {             "search": function () {                 ACTIONS.dispatch(ACTIONS.PAGE_SEARCH);             },             "save": function () {                 ACTIONS.dispatch(ACTIONS.PAGE_SAVE);             }         });     } }); //== view 시작 /**  * searchView  */ fnObj.searchView = axboot.viewExtend(axboot.searchView, {     initView: function () {         this.target = $(document["searchView0"]);         this.target.attr("onsubmit", "return ACTIONS.dispatch(ACTIONS.PAGE_SEARCH);");         this.filter = $("#filter");     },     getData: function () {         return {             pageNumber: this.pageNumber,             pageSize: this.pageSize,             filter: this.filter.val()         }     } }); /**  * gridView  */ fnObj.gridView01 = axboot.viewExtend(axboot.gridView, {     initView: function () {         var _this = this;         this.originList = CODE.originList; //추가                  this.target = axboot.gridBuilder({             showRowSelector: true,             frozenColumnIndex: 0,             sortable: true,             multipleSelect: true,             target: $('[data-ax5grid="grid-view-01"]'),              columns: [             {key: "prdtCd", label: "제품코드", width: 100, align: "center", editor: "text"},                 {key: "prdtNm", label: "제품명", width: 200, align: "center", editor: "text"},                 {                     key: "origin", label: "원산지", width: 100,align: "center", editor: {                     type: "select", config: {                         columnKeys: {                             optionValue: "CD", optionText: "NM"                         },                         options: this.originList //추가                         /*                             // this.originList 에 아래와 같이 셋팅되어있다. 만약 연동하지 않고 하드코딩으로                              // 처리하고 싶으면 this.originList 자리에 아래와 같은 형태로만 입력시켜주면 된다.                         [                         {"CD":"KR","NM":"한국(KR)"},                         {"CD":"US","NM":"미국(US)"},                         {"CD":"JP","NM":"일본(JP)"}                         ]                         */                                              }                   }                 },                 {key: "purchasePrice", label: "매입가격", width: 150, align: "right", editor: "number"},                 {key: "salesPrice", label: "판매가격", width: 150, align: "right", editor: "number"}                       ],             body: {                 onClick: function () {                     this.self.select(this.dindex, {selectedClear: true});                 }             }         });         axboot.buttonClick(this, "data-grid-view-01-btn", {             "add": function () {                 ACTIONS.dispatch(ACTIONS.ITEM_ADD);             },             "delete": function () {                 ACTIONS.dispatch(ACTIONS.ITEM_DEL);             }         });     },     getData: function (_type) {         var list = [];         var _list = this.target.getList(_type);         if (_type == "modified" || _type == "deleted") {             list = ax5.util.filter(_list, function () {                 return this.prdtCd;             });         } else {             list = _list;         }         return list;     },     addRow: function () {         this.target.addRow({__created__: true}, "last");     } });

3. 화면확인 

  - 콤보박스가 잘 나오는 것을 볼 수 있다.

만족하셨나요? ~~~~~~~맘에 드셨다면 아래 꾹~~~