JS 기본 구조 및 기본 함수

자재관리 > 구매관리 > 구매요청 을 기준으로 설명

/**
 * Date: 최초작성일
 * Author: 작성자
 * Description: 메뉴명 
 * 
**/
var GP_SM_PR_003 = {
  //전역 변수
  initMessage: undefined,

  // 초기화 함수
  init : function(){
    let that = this;

    
    that.event();

  },

  event: function() {
    let that = this;

  },

 ajaxFunc : function (url, WEBDATA, msg) {
    let that = this;
    ngsWidget.ajax(0, 'C', url, WEBDATA, function (index, result, data) {
      ngsWidget.splashHide();
      if (result != 'SUCCESS') {
        setTimeout(() => {
          ngsWidget.messageBox({type: 'danger', html: ngsLang.getLang(data.errMsg)});
        }, 50);
        return;
      }
      setTimeout(() => {
        ngsWidget.messageBox({type: 'success', html: ngsLang.getLang(msg)});
        $('#findBtn1').click();  
      }, 50);
    }, undefined, {index: 0, op: 'process', seq: 1, spec: 'JOB', product: 'MES'}, false, that);
  },

  popUpSaveCallBack: function (index, data, rowIndex, popupName) {
    
  },

  

 //#region 조회조건 기간 SETTING
  getMonth : (diff) => {
    const today = new Date();
    const month = new Date(today.getFullYear(), today.getMonth() + diff, 1);
    const fromDate = new Date(month.getFullYear(), month.getMonth(), 1);
    const toDate = new Date(month.getFullYear(), month.getMonth() + 1, 0);
    return { fromDate, toDate };
  },

  getDay : (diff) => {
    const today = new Date();
    const fromDate = new Date(today.setDate(today.getDate() + diff));
    const toDate = fromDate;
    return { fromDate, toDate };
  },

  convertToyyyyMMdd : (date) => {
    if (date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
    return null;
  },
  //#endregion

};

// 문서 로드 완료 후 초기화
$(document).ready(() => {
  ngsWidget.init(1, "GRID", "GP_SM_PR_003", GP_SM_PR_003);
  GP_SM_PR_003.init();
});

Init Callback 함수

• retrieveCallInit: function(index, param, callBackParam, indexInfo)

• retrieveCallBack: function(index, result, data, param, callBackParam, indexInfo)

• saveCallInit: function(index, param, callBackParam, indexInfo)

• saveCallBack: function(index, result, data, param, callBackParam, indexInfo)

• delCallInit: function(index, param, callBackParam, indexInfo)

• delCallBack: function(index, result, data, param, callBackParam, indexInfo)

• addRowCallInit: function(index, param, callBackParam, indexInfo)

• addRowCallBack: function(index, param, callBackParam, indexInfo)

• addBottomRowCallInit: function(index, param, callBackParam, indexInfo)

• addBottomRowCallBack: function(index, param, callBackParam, indexInfo)

• excelDownCallInit: function(index, param, callBackParam, indexInfo)

• excelViewDownCallInit: function(index, param, callBackParam, indexInfo)

• excelGridCallBack: function(index)

• openPopUpCallInit: function(index, e)

• openPopUpCallBack: function(idx, e)

• closePopUpCallInit: function(idx, e)

• closePopUpCallBack: function(idx, e)

• cellEditBeginCallBack : function(index, e)

• cellClickCallInit : function(index, e)

• cellClickCallBack : function(index, e)

• cellEditEndBeforeCallBack : function(index, e)

• pageLoadedCallBack : function(index, widget)

• jqxComboBoxSelectCallBack : function(dataField, which, value)

• cellEditAutoValidateCallBack: function(index, e)

• gridPropertyChangeCallBack: function(index, property)

retrieveCallInit: function(index, param, callBackParam, indexInfo) {
      //조회 시, Data Validation(필수 항목 및 기타 Validation) 이 부합되면 조회 연산 가장 맨앞에 호출되는 함수 조회 연산 또는 저장/수정/삭제 후에는 재조회가 되며 retrieveCallInit이 실행된다.
      //index: 위젯 index (어떤 위젯에서 조회가 발생되었는지, 순번은 0부터 시작: 0은 1번 grid를 의미함)
      //param: 조회할 데이터 값 (1차원 JSON 값으로 전달되며, 필터영역에서 검색 시 입력한 값이 담겨있음)이 전달되며, 함수내에서 데이터 변조 가능(파라미터를 추가하거나 제거 하는 등의 변조가 가능하다)
      //callBackParam: 현재의 연산(조회) 후, 다음 연산이 정의 되어 있다면(Transaction 연산 - 위젯 세팅시, 컬럼타입으로 'ACTION' 을 통해 정의 가능) 다음 연산의 파라미터 값
      indexInfo: {       // 현재 작업의 기본 정보
       index: 0          // 첫번째 그리드 조회
      , op: 'findBtn1'    // 연산의 트리거, DOM 상에서의 id 값
      , seq: 1            // Transaction 연산의 순번, 현재 연산(조회)이 트랜잭션상의 첫번째 연산이면 1
      , spec: 'ACTION'    // 연산의 구분 ['FILTER', 'GRID', 'ACTION', 'JOB'] 등이 올 수 있다
      , product: 'AMING'  // 현재 연산(조회)의 Target 제품 ['AMING', 'MES', 'QMS', 'APS', 'WMS', 'SCM', ...]
}

retrieveCallBack: function(index, result, data, param, callBackParam, indexInfo){
    //조회 후 호출되는 함수이다. 조회가 성공하여 얻은 데이터로 원하는 동작을 수행할 수 있다. (ex. 위젯에서 보여지는 데이터의 표기 변경 등, 변조 가능)
    //index: 상기의 retrieveCallInit 과 동일(참조)
    //result: 조회 성공 여부. 성공 시 SUCCESS, [SUCCESS, ERROR, FAIL]
    //data: 조회로 받아온 JSON Array 데이터 값(만약, 조회된 데이터를 변조하고 싶다면, 데이터를 변경할 수 있다) 
    //param: 상기의 retrieveCallInit 과 동일(참조)
    //callBackParam: 상기의 retrieveCallInit 과 동일(참조)
    //indexInfo: 상기의 retrieveCallInit 과 동일(참조)
}

saveCallInit: function(index, param, callBackParam, indexInfo){
   //저장/수정/삭제 시 연산 가장 맨앞에 호출되는 함수 저장의 경우, saveBtn, 저장/수정/삭제는 셀편집(수정) 또는 delLazyBtn 을 통해 삭제 후, saveAllBtn, upsertAllBtn을 사용했을 시 불리운다.
   //index:  위젯 index (어떤 위젯에서 저장/수정/삭제가 발생되었는지, 순번은 0부터 시작: 0은 1번 grid를 의미함)
   //param: 저장/수정/삭제할 데이터 값 (2차원 JSON 값 - JSON Array 형태, 원소가 1개이어도 [{}] 의 형태)이 전달되며, 함수내에서 데이터 변조 가능(개별 원소는 JSON key 'NEW' 값에 의해 저장/수정/삭제 - Y/U/D 를 확인할 수 있다)
   //callBackParam: 현재의 연산(저장/수정/삭제) 후, 다음 연산이 정의 되어 있다면(Transaction 연산 - 위젯 세팅시, 컬럼타입으로 'ACTION' 을 통해 정의 가능) 다음 연산의 파라미터 값
   indexInfo: {       // 현재 작업의 기본 정보
    index: 0          // 첫번째 그리드 저장/수정/삭제
  , op: 'saveAllBtn1'   // 연산의 트리거, DOM 상에서의 id 값
  , seq: 1            // Transaction 연산의 순번, 현재의 연산(저장/수정/삭제)이 트랜잭션상의 첫번째 연산이면 1
  , spec: 'ACTION'    // 연산의 구분 ['FILTER', 'GRID', 'ACTION', 'JOB'] 등이 올 수 있다
  , product: 'AMING'  // 현재의 연산(저장/수정/삭제)의 Target 제품 ['AMING', 'MES', 'QMS', 'APS', 'WMS', 'SCM', ...]
}

saveCallBack: function(index, result, data, param, callBackParam, indexInfo){
   //저장/수정/삭제 후 호출되는 함수이다. 저장의 성공/실패의 결과로 원하는 동작을 수행할 수 있다. saveBtn, saveAllBtn, upsertAllBtn 모두가 이 callBack 함수를 거친다.
   //index: 상기의 saveCallInit 과 동일(참조)
   //result: 저장/수정/삭제 성공 여부. 성공 시 SUCCESS, [SUCCESS, ERROR, FAIL]
   //data: 저장/수정/삭제 결과의 JSON 데이터 값 
   //param: 상기의 saveCallInit 과 동일(참조)
   //callBackParam: 상기의 saveCallInit 과 동일(참조)
   //indexInfo: 상기의 saveCallInit 과 동일(참조)
}

delCallInit: function(index, param, callBackParam, indexInfo){
  //HTML DOM 상에서, 기능버튼 delBtn(즉시 삭제) 연산시 맨앞에 호출되는 함수
  //index:  위젯 index (어떤 위젯에서 삭제가 발생되었는지, 순번은 0부터 시작: 0은 1번 grid를 의미함)
  //param: 삭제할 데이터 값 (2차원 JSON 값 - JSON Array 형태, 원소가 1개이어도 [{}] 의 형태)이 전달되며, 함수내에서 삭제할 데이터 변조 가능
  //callBackParam: 현재의 연산(삭제) 후, 다음 연산이 정의 되어 있다면(Transaction 연산 - 위젯 세팅시, 컬럼타입으로 'ACTION' 을 통해 정의 가능) 다음 연산의 파라미터 값
  indexInfo:{         // 현재 작업의 기본 정보
   index: 0           // 첫번째 그리드 조회
 , op: 'delBtn1'  // 연산의 트리거, DOM 상에서의 id 값
 , seq: 1             // Transaction 연산의 순번, 조회가 트랜잭션상의 첫번째 연산이면 1
 , spec: 'ACTION'     // 연산의 구분 ['FILTER', 'GRID', 'ACTION', 'JOB'] 등이 올 수 있다
 , product: 'AMING'   // 현재 조회 연산의 Target 제품 ['AMING', 'MES', 'QMS', 'APS', 'WMS', 'SCM', ...]
}

delCallBack: function(index, result, data, param, callBackParam, indexInfo){
   //delBtn(즉시 삭제) 시 불리운다.
   //index: 상기의 delCallInit 과 동일(참조)
   //result: 삭제 성공 여부. 성공 시 SUCCESS, [SUCCESS, ERROR, FAIL]
   //data: 삭제 결과의 JSON 데이터 값 
   //param: 상기의 delCallInit 과 동일(참조)
   //callBackParam: 상기의 delCallInit 과 동일(참조)
   //indexInfo: 상기의 delCallInit 과 동일(참조)
}

addRowCallInit: function(index, param, callBackParam, indexInfo){
   //상단 행 추가 시 초기에 호출되는 함수이다. (ex. param에 값을 추가하여 원하는 데이터 바인딩 등)
   //index:  위젯 index (어떤 위젯에서 삭제가 발생되었는지, 순번은 0부터 시작: 0은 1번 grid를 의미함)
   //param: 새로 추가된 JSON 데이터가 전달된다(새로 행으로 추가된 데이터이므로 기본적으로 {'NEW': 'Y} 데이터가 전부이다. 새로 추가되는 행에 알고 있는 기본 정보를 추가할 수도 있다)
   //callBackParam: 현재의 연산(행추가) 후, 다음 연산의 파라미터 값이지만 정의되어져 있는 것이 없으므로 거의 undefined 의 값이 넘어간다
   indexInfo:{         // 현재 작업의 기본 정보
    index: 0           // 첫번째 그리드 조회
  , op: 'addBtn1'      // 연산의 트리거, DOM 상에서의 id 값
  , seq: 1             // Transaction 연산의 순번, 조회가 트랜잭션상의 첫번째 연산이면 1
  , spec: 'JOB'        // 연산의 구분 ['FILTER', 'GRID', 'ACTION', 'JOB'] 등이 올 수 있다
}

addRowCallBack: function(index, param, callBackParam, indexInfo){
   //상단 행 추가 시 마지막에 호출되는 함수이다.
   //index: 상기의 addRowCallInit 과 동일(참조)
   //param: 상기의 addRowCallInit 과 동일(참조)
   //callBackParam: 상기의 addRowCallInit 과 동일(참조)
   //indexInfo: 상기의 addRowCallInit 과 동일(참조)
}

addBottomRowCallInit: function(index, param, callBackParam, indexInfo){
   //하단 행 추가 시 초기에 호출되는 함수이다.(ex. param에 값을 추가하여 원하는 데이터 바인딩 등)
   //index:  위젯 index (어떤 위젯에서 삭제가 발생되었는지, 순번은 0부터 시작: 0은 1번 grid를 의미함)
   //param: 새로 추가된 JSON 데이터가 전달된다(새로 행으로 추가된 데이터이므로 기본적으로 {'NEW': 'Y} 데이터가 전부이다. 새로 추가되는 행에 알고 있는 기본 정보를 추가할 수도 있다)
   //callBackParam: 현재의 연산(행추가) 후, 다음 연산의 파라미터 값이지만 정의되어져 있는 것이 없으므로 거의 undefined 의 값이 넘어간다
   indexInfo:{         // 현재 작업의 기본 정보
    index: 0           // 첫번째 그리드 조회
  , op: 'addBottomBtn1'// 연산의 트리거, DOM 상에서의 id 값
  , seq: 1             // Transaction 연산의 순번, 조회가 트랜잭션상의 첫번째 연산이면 1
  , spec: 'JOB'        // 연산의 구분 ['FILTER', 'GRID', 'ACTION', 'JOB'] 등이 올 수 있다
}

addBottomRowCallBack: function(index, param, callBackParam, indexInfo){
       //하단 행 추가 시 마지막에 호출되는 함수이다.
       //index: 상기의 addBottomRowCallInit 과 동일(참조)
       //param: 상기의 addBottomRowInit 과 동일(참조)
       //callBackParam: 상기의 addBottomRowInit 과 동일(참조)
       //indexInfo: 상기의 addBottomRowInit 과 동일(참조)
}

excelDownCallInit: function(index, param, callBackParam, indexInfo){
       //엑셀 다운 시 초기에 호출되는 함수이다. 엑셀을 내릴 때 형식, 컬럼 등을 변경하고 싶을 경우 사용할 수 있다.개별 페이지의 로컬 변수로 excelDownParam 이 undefined 가 아니면, 엑셀 다운로드 시, 위젯 세팅을 참고하는 것이 아닌 columnProperty 로서, excelDownParam 을 더 우선(재정의) 하여 따르게 된다. 엑셀 다운로드의 정책을 위젯 세팅이 아닌 변경하고 싶을 시, 사용할 수 있다(내리는 컬럼 수정(Show/Hide), 컬럼명, 배경색 etc..)
       //index:  위젯 index (어떤 위젯에서 엑셀 다운로드가 발생되었는지, 순번은 0부터 시작: 0은 1번 grid를 의미함)
       //param: to-be 데이터이며 현재는 undefined 값이 넘어 간다
       //callBackParam: to-be 데이터이며 현재는 undefined 값이 넘어 간다
       //indexInfo: 현재 작업의 기본 정보를 넘기나, to-be 데이터이며 현재는 undefined 값이 넘어 간다
}

excelViewDownCallInit: function(index, param, callBackParam, indexInfo){
       //엑셀 뷰 다운(실 데이터보다 보여지는 데이터로 엑셀을 내리는) 시 초기에 호출되는 함수이다. 엑셀을 내릴 때 형식, 컬럼 등을 변경하고 싶을 경우 사용할 수 있다. 개별 페이지의 로컬 변수로 excelDownParam 이 undefined 가 아니면, 엑셀 다운로드 시, 위젯 세팅을 참고하는 것이 아닌 columnProperty 로서, excelDownParam 을 더 우선(재정의) 하여 따르게 된다. 엑셀 다운로드의 정책을 위젯 세팅이 아닌 변경하고 싶을 시, 사용할 수 있다(내리는 컬럼 수정(Show/Hide), 컬럼명, 배경색 etc..)
      //index:  위젯 index (어떤 위젯에서 엑셀 다운로드가 발생되었는지, 순번은 0부터 시작: 0은 1번 grid를 의미함)
      //param: to-be 데이터이며 현재는 undefined 값이 넘어 간다
      //callBackParam: to-be 데이터이며 현재는 undefined 값이 넘어 간다
      //indexInfo: 현재 작업의 기본 정보를 넘기나, to-be 데이터이며 현재는 undefined 값이 넘어 간다
}

 excelGridCallBack: function(index){
       //엑셀 업로드 시 콜백 함수이다. 방금 업로드한 데이터를 변경하고 싶은 경우 사용할 수 있다.
       //index:  위젯 index (어떤 위젯에서 엑셀 업로드가 발생되었는지, 순번은 0부터 시작: 0은 1번 grid를 의미함)
}

openPopUpCallInit: function(index, e){
    //팝업을 열 때 초기에 호출되는 함수이다.(ex. 필수입력사항 validation 체크, 선택된 행 클릭 시 열리는 팝업인 경우 선택된 상태인지 체크 등)
    //index:  팝업 창 index (어떤 팝업이 열리고 있는지, 11번 팝업을 여는 중이면, index: 10)
    //e: 팝업 이벤트 객체, target, offsetX, offsetY, type, altKey, … etc
}

openPopUpCallBack: function(idx, e)){
    //팝업을 열고 난 후 호출되는 함수이다.(ex. 팝업의 value값 바인딩 등)
    //index:  팝업 창 index (어떤 팝업을 열었는지, 11번 팝업을 열었다면, index: 10)
    //e: 팝업 이벤트 객체, target, offsetX, offsetY, type, altKey, … etc
}

closePopUpCallInit: function(idx, e){
    //팝업을 닫을 때 호출되는 함수이다.
    //index:  팝업 창 index (어떤 팝업을 닫고 있는지, 11번 팝업을 닫는다면, index: 10)
    //e: 팝업 이벤트 객체, target, offsetX, offsetY, type, altKey, … etc
}

closePopUpCallBack: function(idx, e){
    //팝업을 닫고 난 후 호출되는 함수이다.(ex. 팝업이 열렸던 그리드의 행에 포커스 등)
    //index:  팝업 창 index (어떤 팝업을 닫았는지, 11번 팝업을 닫았다면, index: 10)
    //e: 팝업 이벤트 객체, target, offsetX, offsetY, type, altKey, … etc
}

cellEditBeginCallBack : function(index, e){
    //셀 편집이 시작될 때 호출되는 함수이다.
    //index:  셀편집 위젯 index (어떤 그리드에 대해 편집을 하려는지, 순번은 0부터 시작: 0은 1번 grid를 의미함)
    //e: 셀편집 이벤트 객체, type, pid, item, dataField, rowIndex, columnIndex … etc
}

cellClickCallInit : function(index, e) {
    //셀 클릭 시 호출되는 함수이다. 선택한 셀의 정보를 알 수 있고, 셀 클릭 시 원하는 동작을 수행할 수 있다.
    //index:  셀클릭 위젯 index (어떤 그리드에 대해 클릭을 했는지, 순번은 0부터 시작: 0은 1번 grid를 의미함)
    //e: 셀클릭 이벤트 객체, type, pid, item, dataField, rowIndex, columnIndex … etc
}

cellClickCallBack : function(index, e){
    //셀 클릭 후에 호출되는 함수이다.
    //index:  셀클릭 위젯 index (어떤 그리드에 대해 클릭을 했는지, 순번은 0부터 시작: 0은 1번 grid를 의미함)
    //e: 셀클릭 이벤트 객체, type, pid, item, dataField, rowIndex, columnIndex … etc
}

cellEditEndBeforeCallBack : function(index, e){
    //셀 편집 후 포커스가 나갈 때 호출되는 함수이다.
    //index:  셀편집 위젯 index (어떤 그리드에 대해 편집을 했는지, 순번은 0부터 시작: 0은 1번 grid를 의미함)
    //e: 셀편집 이벤트 객체, type, pid, item, dataField, rowIndex, columnIndex, value, oldValue … etc
}

pageLoadedCallBack : function(index, widget){
    //페이지가 로딩되고 난 후 호출되는 함수이다.
    //index: loaded 위젯 index (어떤 그리드에 대해 loading이 완료 되었는지, 순번은 0부터 시작: 0은 1번 grid를 의미함)
    //widget: ngsWidget 객체를 전달해 준다
}

jqxComboBoxSelectCallBack : function(dataField, which, value){
       //드롭다운 값을 선택할 때 호출되는 함수이다.
       //dataField:  드롭다운의 데이터필드값
       //which: 선택한 value의 index
       //value: 선택한 value의 code
}

cellEditAutoValidateCallBack: function(index, e){
       //Grid 편집모드일 경우 validate 할 함수를 반환한다. 
        return function(prevVal, inputVal, curVal) {
       // 이전값 : prevVal, 입력된값 : inputVal, 현재 전체값 : curVal
        if(e.dataField == "데이터필드") {
          var pattern = /^[a-zA-Zs]+$/; 
          if (!pattern.test(inputVal) == true) { // 영어아닐 경우
           return false;
          }
        }
       return true;
       //index:  셀편집 위젯 index (어떤 그리드에 대해 편집을 하려는지, 순번은 0부터 시작: 0은 1번 grid를 의미함)
       //e: 셀편집 이벤트 객체, type, pid, item, dataField, rowIndex, columnIndex … etc
}

gridPropertyChangeCallBack: function(index, property){
    //페이지가 로드될 때 실행되어 그리드 속성을 변경할 수 있다. Property를 return해주어야 한다.(ex.  property[key] = value; return property)
    //index: 위젯 index (default로 0)
    //property: 해당 페이지의 widget 설정값
}

pageLoadedCallBack

page가 로드된 뒤 동작이 필요할 경우 사용하는 함수

pageLoadedCallBack: function(index, widget) {
    $('#findBtn1').trigger('click');
},

findBtn은 검색 버튼으로 Gird 별로 생성하고 findBtn1을 제외한 2,3... 다른 버튼은 숨김 처리 한다.