[WebSquare] 웹스퀘어 5 gridview event 및 Formatter

** gridview event 및 Formatter **

1. 그리드 컬럼 별로 이벤트 주기(oncellclick)
- gridView를 구성하는 각 컬럼별로는 event가 없다. 그래서 gridView자체에 이벤트 주고 뽑아내야 한다
  이벤트에 있는 row, col(컬럼의 인텍스값)를 이용하자
  예] 사번더블클릭시 해당 row의 주소 팝업 뜨게 하기

scwin.ui_memberList_oncelldblclick = function(row,col,colId) {
    var scolId = ui_memberList.getColumnID(col);
    if(scolId == "EMP_CD"){
    	alert(dc_userInfoList.getCellData(row, "ADDRESS1"));
    }
};

2. 컬럼에 필수값에 값 없을때 값 삭제 취소하기(dataCollection 이벤트)
- onbeforecelldatachange 이벤트 사용
- dataCollection에서 제공하는 newValue, oldValue 활용가능하다

scwin.dc_userInfoList_onbeforecelldatachange = function(info) {
    if(info.colID == "EMP_NM"){
        if(info.newValue==""){
       		return false;
        }
    }
};

3. 조회된 dataList의 전체 건수 구하기(dataCollection 이벤트)
- ondataload 이벤트 사용
- 화면 컴포넌트에 값 적용시 setValue, setLabel등 API 활용
- 전체 data의 건수를 구할때 dataList의 getRowCount API 활용
- ondataload 이벤트는 data가 load된 후 발생
- 이와 비슷한 event로는 ininsertRow(신규로 행이 생성된 경우 발생), onremoverow(행이 삭제된 경우 발생) 등이 있다

scwin.fn_totalRowCount_dc_userInfoList = function(){
 ui_totRowCount.setValue(dc_userInfoList.getRowCount());
}
scwin.dc_userInfoList_ondataload = function() {
 scwin.fn_totalRowCount_dc_userInfoList();
};
scwin.dc_userInfoList_oninsertrow = function(info) {
 scwin.fn_totalRowCount_dc_userInfoList();
};
scwin.dc_userInfoList_onremoverow = function(info) {
 scwin.fn_totalRowCount_dc_userInfoList();
};

4. detail부분에 gridView에서 선택한 row의 상세 정보 맵핑
1) onrowindexchange 이벤트 활용(gridView 이벤트)
- onrowindexchange 이벤트는 gridView의 row인덱스가 변경될때 발생
  변경될 row인덱스에 대한 rowdata를 구한 후 table내에 detail 정보에 각각의 값을 적용하여 반영
  row data를 구할때는 getRowJSON 이라는 API를 활용하여 json 형태의 data로 활용

scwin.ui_memberList_onrowindexchange = function(row,oldRow) {
    var rowData = dc_userInfoList.getRowJSON(row);
    ui_form_name.setValue(rowData.EMP_NM);
    ui_form_gender.setValue(rowData.GENDER_CD);
    ui_form_joindate.setValue(rowData.JOIN_DATE);
    ui_form_position.setValue(rowData.POSITION_CD);
};

2) 항목이 많아서 일일이 작성하기 힘들때
Master & detail 구조에서 Master 부분이 gridView처럼 Focus Row Index를 갖는 경우 Rocus Row Index를 기준으로 가상 Map data가 생성된다
이렇게 바인딩할때는 dataList의 각 컬럼과 detail부분의 세부 field를 drag&drop 방식을 맵핑 할것
이처럼 적용하면 event를 이용하여 일일이 script를 작성하지 않아도 된다
해당 detail항목의 ref에 dataList에서 드래그한 값이 맵핑되어 있다(data:dc_userInfoList.GENDER_CD)

5. gridview의 보여지는 data는 그 형태를 변경하여 보여주기
- displayformatter:사용할 함수명 (예] scwin.fnDisFormat)
  column 속성 이용 : data 포맷 설정을 함수를 통해 구현  
- displayFormat : data의 포맷을 설정(예] #,###)

scwin.fnDisFormat = function(data){
	return data.substring(0,3)+"-"+data.substring(3,6);
};

6. gridView의 customFormatter 통해 특정 data에만 컬럼 색상주기
- data, formattedData, rowIndex, colIndex 라는 4개의 파라미터를 가지며,
  컬럼의 inputType이 text, link, textImage, textarea, select, exprssion, spinner인 경우에만 사용할 수 있다
- customFormatter:사용할 함수명 (예] scwin.fnCusFormat)
- gridView의 cell 색상을 변경하는 API -> setCellColor(rowIndex, colID 혹은 colIndex, color)
- 예] data 중 성별이 여자인 경우 이름 컬럼에 색상 변경

scwin.fnCusFormat = function(data, formattedData, rowIndex, colIndex){
    if(data == 'F'){
    	ui_memberList.setCellColor(rowIndex, "EMP_NM", "green");
    }
    return formattedData;
};

7. dataList에서 두개로 나누어진 주소값 하나의 컬럼으로 표현하기(dataCollection 속성이용 importFormatter)
- gridView와 바인딩된 dataList의 컬럼의 formatter 기능 이용
  dataCollection에서 신규로 컬럼 만들고 해당컬럼 선택 후 Property 확인해면 importFormatter 속성을 사용하여 통합주소 만듬
- importFormatter:사용할 함수명 (예] scwin.fnImpFormat(rowJson, rowIndex, colIndex))

scwin.fnImpFormat = function(rowJson, rowIndex, colIndex){
	return rowJson.ADDRESS1+" "+rowJson.ADDRESS2;
};