[WebOrder] IBSheet 페이징 처리 및 포커스 (searchMode:2 / onVScrollEndPoint)

 

 

 

원래 맨 처음에는 doSearchPaging 과 searchMode:3 을 이용해서

(total과 한 페이지 당 행 수를 보내서 데이터 가져오고 페이징할 때마다 서버에서 페이지 불러오는)

무한스크롤처럼 서버스크롤페이징을 구현했었는데

 

이건 Wrap (줄바꿈) 같은 가변행을 만드는 속성과 함께 쓸 수 없다고 해서 

doSearch와 searchMode:2

(전체 데이터를 조회하고 스크롤 내릴 때마다 계산해서 아래에 다음 데이터 붙이는(append))을 쓰고 있다.

 

이때 자동으로 시트 첫 행에 포커스가 가도록 하거나,

특정 행을 클릭 또는 더블 클릭해서 데이터를 수정하고 저장하거나,

dialog를 열고 데이터를 수정하거나 저장하면 기존 선택했던 행에 포커스가 유지되도록 하기 위해서

플래그가 필요하다.

 

 

처음에 GPT 도움을 받아서

isAppending 페이징 플래그와 autoSelect 자동선택 플래그를 썼는데

하다보니까 비효율적이라는 것을 알았다.

 

그냥 지금 페이징 중인지 (아니면 조회 중인지) 플래그 하나만 두고 처리하면 쉽다.

 

이건 BalanceManagement.vue 이고 

조회 플래그를 썼다.

let isSearching = true;
let selectedCustSeq = ref(null);  // 클릭한 거래처 테이블 custSeq.
let selectedCustName = ref("");
let selectedBalanceSerl = ref(null);   // 클릭한 입출금내역 테이블 행 custSeq.
let selectedBalanceRow = ref(null);   // 클릭한 입출금내역 테이블 행 번호.

 

// 거래처 조회.
const doSearchCusts = () => {
    custsPage = 1;
    isSearching = true;
    getCustsList(false);
}

// 거래처 리스트 API 요청.
const getCustsList = (append=false) => {

    const params = {
        url: "../balanceManagement/getCustsList.do",
        method: "post",
        reqHeader: {"Content-Type": "application/json"},
        append: append,
        param: {
            data :{
                ibpage: custsPage,
                ibpagelength: ibpagelength,
                custName: kwdCustName.value
            }
        },
    }
    doSearch(custsSheet, params);
};

 

 

 

 

 

// IBSheet 이벤트

onSearchFinish: function(evtParam) {
    const sheet = evtParam.sheet;

    if(isSearching) {
        const firstRow = sheet.getFirstRow();
        if(firstRow) {
            sheet.focus(firstRow, "custName");
            selectedCustSeq.value = firstRow.custSeq;
            selectedCustName.value = firstRow.custName;
            getBalanceList(false);
        } else {
            selectedCustSeq.value = '';
            selectedCustName.value = '';
            getBalanceList(false);
        }
        isSearching = false;
    } else {
        // 선택행 존재하면 포커스.
        if(selectedCustSeq.value) {
            const dataRows = sheet.getDataRows();
            const targetRow = dataRows.find(r => sheet.getValue(r, "custSeq") === selectedCustSeq.value);
            if (targetRow) {
                sheet.focus(targetRow);
                getBalanceList(false);
            }
        }
    }
},
onVScrollEndPoint: function(evtParam) {
    if(evtParam.vpos) {
        custsPage++;
        getCustsList(true);
    }
},

 

 

조회중일 때 첫 행을 선택하게 하고

만약 기존에 선택한 행 (selectedCustSeq) 이 있으면

그 행의 seq와 같은 custSeq를 가진 행에 포커스를 준다.