티스토리 뷰

 AG Grid는 많은 기본적인 기능을 제공하는 매우 강력한 Grid 제품입니다. 저 또한 손 쉽게 사용이 가능하고 여러 가지 많은 기능들을 제공해주는 AG Grid를 자주 사용합니다. 어쩌다 이번 개발 프로젝트에서 가볍게 thymeleaf를 이용한 프론트를 구성해야 하게 되었는데 Grid로 이전에 사용해 왔던 AG Grid를 채택하여 사용하게 되었습니다. 다만 문제가 데이터 하나에 자식 데이터로 여러 개를 표현해야 해서 Height를 조정해야 될 필요성이 생겼는데, 이래 저래 둘러보니 모두 Enterprise 버전에서만 기능들이 제공되었습니다. 예산도 없고 가진 건 시간 뿐인 가난한 개발자는 고뇌에 빠져 한참을 구글링도 하고 Chatgpt씨와 열심히 대화도 나누어 봤지만 방법이 없었습니다.. 이런 제기랄.. 또 혼자 어떻게든 해결해 나갈 수 밖에 없겠군 싶었습니다.

 Chatgpt는 일단 setRowHeight로 해결 하라는데 이건 client 방식에만 해당 되는 것이어서 기각... 또 기본적으로 제공하는 resetRowHeights 함수를 쓰라는데 써 보니 콘솔창에 Infinite 모델은 지원하지 않는다는 얘기만.. 그래서 잔 대가리를 매우 굴려가며 어떻게 처리할까 하다가 보니 onPaginationChaged 라는 함수가 있어서 여기다가 Paging 처리가 되어서 데이터가 바뀔 때마다 각 Row들의 높이가 바뀌도록 설정했고 그 합산을 구해서 Grid와 스크롤의 높이를 재적용하는 로직을 넣었습니다. 

onPaginationChanged: (params) => {
    setGridHeight();
},


function setGridHeight() {
    let top = 0;
    grid.forEachNode(function (row) {
        if (document.querySelector(`[row-id="${row.id}"]`)) {
            document.querySelector(`[row-id="${row.id}"]`).style.height = `${row.data.child.length * 42}px`;
            document.querySelector(`[row-id="${row.id}"]`).style.transform = `translateY(${top}px)`;
            console.log(row.id + " : " + top);
            top += row.data.child.length * 42;
        }
    });
    document.querySelector(".ag-viewport.ag-center-cols-viewport").style.height = `${top}px`;
    document.querySelector(".ag-body-vertical-scroll-container").style.height = `${top}px`;
}

 

 이렇게 적용하니 잘 되었는데 문제가 하나 더 있었으니.. 스크롤을 할 때마다 높이를 Grid가 스스로 재 계산해서 스크롤 한번 하고 나면 또 엉망진창이 되어 버리는 결과가..

 

let scrollEnd = false;
const viewport = document.querySelector('.ag-body-viewport');
grid.addEventListener('bodyScroll', (e) => {
    if (!scrollEnd) setGridHeight();
    let scrollTop = viewport.scrollTop;
    let clientHeight = viewport.clientHeight;
    let scrollHeight = viewport.scrollHeight;
    scrollEnd = scrollTop + clientHeight >= scrollHeight - 2;
});

 

 그래서 위와 같이 스크롤이 될 때마다 높이를 재계산 해주게 했고, 스크롤이 맨 아래로 가면 약간 튕기는 듯한 이상한 동작이 발생하여 맨 아래로 가면 더 이상 길이를 조정하지 않도록 하는 조건을 넣어주어 해결 했습니다. 아마 버전이 업그레이드 되면 AG Grid도 돈을 벌어야 하니 막을 지는 모르겠다면 현재는 이대로 사용 가능하니 적용해 보시면 됩니다~ 저기에 grid는 만들어진 grid 변수 입니다!

댓글
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday