[IBSheet] onClick(), onDblClick(), onAfterClick() 이벤트로 수정, 삭제 시 열이름 클릭 제외

 

 

IBSheet에 클릭이벤트를 줬는데

헤더를 클릭해도 이벤트가 실행되면 난감하다. 정렬이나 필터 기능을 써야하기 때문이다.

 

이럴 때

 

IBSheet8의 이벤트를 써서 간단하게 처리하는 방법이 있다.

 

 

const clickedRow = evtParam.row;
if (clickedRow && sheet.getRowKind(clickedRow) === "Data") {

 

getRowKind() = 행의 유형을 확인

 

Data(데이터영역),

Header(헤더영역),

Head(상단고정),

Foot(합계행 혹은 하단고정),

Filter(필터행),

Group(그룹행),

Space(건수정보표시행 혹은 솔리드행) 등이 있다.

 

이러면 클릭이벤트가 행 클릭했을 때만 적용된다.

 

 

 

행의 유형을 체크하는 이벤트라

꼭 클릭이벤트가 아니더라도 여기 저기 쓸 곳이 많을 것 같다.

 

 

---

// 이전에 썼던 방법

 

 

그냥 이벤트 줄 경우

열이름 클릭해도 on~이벤트 함수가 실행된다.

 

            onAfterClick: function (evtParam) {
                if (!evtParam.row || evtParam.row.tagName === "U" || !evtParam.col) return;

                if (evtParam.col === 'assetCode') {
                    const rowData = evtParam.row;
                    openEditDialog(rowData);
                } else if(evtParam.col === 'acqDelete') {
                    const rowData = evtParam.row;
                    const formattedPrice = new Intl.NumberFormat('ko-KR', {
                        minimumFractionDigits: 0,
                        maximumFractionDigits: 0
                    }).format(rowData.acqPrice);

                    const message =
                        `정말 삭제하시겠습니까?<br><br>` +
                        `계정과목 : ${rowData.accountTitle}<br>` +
                        `자  산  명 : ${rowData.assetName}<br>` +
                        `취득금액 : ${formattedPrice}원`;

                    confirm.value.open(message).then(result => {
                        if (result) {
                            doRequestJson("post", `../main/deleteAsset.do?assetCode=${rowData.assetCode}`)
                                .then(result => {
                                    if(result) {
                                        alert.value.open('삭제 되었습니다.');
                                        evtParam.sheet.deleteRow(rowData);
                                        searchAsset();
                                    } else {
                                        alert.value.open('삭제에 실패했습니다.');
                                    }
                                });
                        }
                    });
                }
            }

 

 

 

그래서 evtParam.row 를 찍어보니 차이점이 있다.

 

 

 

 

일단 위에 찍힌 log가 헤더 클릭했을 때

아래 찍힌 log는 행 클릭했을 때

 

따라서 차이점은

헤더 누르면 kind: "Header" 가 있고

TagName이 헤더는 U, 행은 I로 찍힌다.

 

onAfterClick() 에서

if (!evtParam.row || evtParam.row.tagName === "U" || !evtParam.col) return;

 

이렇게 막거나

if (!evtParam.row || evtParam.row.kind === "Header" || !evtParam.col) return;

 

로 시도해볼 수 있겠다.

 

사실 !evtParam.row 이거는 엉뚱한 클릭 막는 건데 필요가 있나 싶다..

빈공간 클릭 막는 거라고 한다 ..

 

!evtParam.col 은 컬럼이 없을 때 인데 ...

 

어쨌든 혹시 모를 상황을 대비해 이것 저것 막아둔다.

 

 

아.

그리고 처음에 onClick() 에 삭제

onAfterClick() 에 수정을 썼었는데 그냥 하나로 합쳤다.

 

 

 

기존코드

            onAfterClick: function (evtParam) {
                if (evtParam.col === 'assetCode') {
                    const rowData = evtParam.row;
                    openEditDialog(rowData);
                }else if(evtParam.col === 'acqDelete') {

                }
            },
            onClick: function (evtParam) {
                if (evtParam.col === 'acqDelete') {
                    const rowData = evtParam.row;
                    const formattedPrice = new Intl.NumberFormat('ko-KR', {
                        minimumFractionDigits: 0,
                        maximumFractionDigits: 0
                    }).format(rowData.acqPrice);

                    const message =
                        `정말 삭제하시겠습니까?<br><br>` +
                        `계정과목 : ${rowData.accountTitle}<br>` +
                        `자 산 명  : ${rowData.assetName}<br>` +
                        `취득금액 : ${formattedPrice}원`;

                    confirm.value.open(message).then(result => {
                        if (result) {
                            doRequestJson("post", `../main/deleteAsset.do?assetCode=${rowData.assetCode}`)
                                .then(result => {
                                    if(result) {
                                        alert.value.open('삭제 되었습니다.');
                                        evtParam.sheet.deleteRow(rowData);
                                        searchAsset();
                                    } else {
                                        alert.value.open('삭제에 실패했습니다.');
                                    }
                                });
                        }
                    });
                }
            }