◼︎ 환경
- Model : MacBook Pro (14-inch, 2021)
- CPU : Apple M1 Pro
- MENORY : 16GB
- DISK : 512 GB SSD
- OS : macOS 13.2.4 (22F66)
- TOOLS : Visual Studio Code, Java 11, Gradle, Docker
- Version Control : GitHub
- Programming Language : Java, Vue3
- Front-End Framework : Vue 3.4.30, Vuetify 3.6.10, ag-grid-vue3 31.3.2
- Back-End Framework : Spring Boot 2.7.12, Spring Security 5.7.7
- DBMS : MySql 8.0.33
- Cloud : OCI (free tier account)
AG Grid Community는 필터링, 정렬, 그룹핑 등 다양한 기능을 제공하며 대규모 데이터 처리에 특히 유용하다. 추가로 무료로 제공되기 때문에 많은 프로젝트에서 널리 사용된다고 한다.
1. 설치하기
설치는 간단하게 아래 명령을 사용하여 패키지를 설치할 수 있다. 사용하는 것 역시 별도의 설정이 없어도 바로 사용할 수 있다.
npm install --save ag-grid-vue3 가장 힘들었던 부분이 특정 컬럼(셀)에 사용자 정의 렌더러을 지정하여 버튼들을 그리고 해당 버튼을 클릭하면 해당 이벤트에 따라 저장/삭제 동작을 구현하는 것이었다.
Actions 에 해당 하는 셀은 ActionCellRenderer.vue 만들어 구현을 했다. 문제는 row 데이터에 따라 버튼을 제어( 노출/숨김) 하고 클릭시 이벤트를 받아 서버 통신을 통해서 삭제/저장을 구현하는 화면을 구현하려고 했다.
1) defineProps 함수를 사용하여 전달된 params 값을 바인딩 하려고 했으나 이부분이 해결되지 않아 params 을 직접 접근하는 방식으로 코드를 작생했다.
const props = defineProps<{
data?: { [key: string]: any };
api?: any;
node?: any;
params: {
data: { [key: string]: any };
api: any;
node: any;
}
}>();
2) 버튼을 클릭하면 defineEmits 사용하여 정의한 이벤트를 발생하는 것으로 코드를 만들었지만 부모 즉 ag-grid 구현 화면에 해당 이벤트를 전달하는 방법을 찾지 못해 prams.api 로 전달되는 GridApi.dispatchEvent() 함수를 사용했다. (-> 이부분을 알아내는 것이 가장 힘들었던 것 같다)
const saveRow = () => {
props.params.api.dispatchEvent({
type: 'actionCellRenderer:save',
data: props.params.data
});
};
const deleteRow = () => {
emits('delete', props.params.data);
props.params.api.dispatchEvent({
type: 'actionCellRenderer:delete',
data: props.params.data
});
};
GridApi.dispatchEvent() 함수를 사용하여 전달된 이벤트를 ga-grid 화면을 그리는 페이지에서 받기 위해서는 GridApi.addEventListener() 함수를 사용하여 리스트너를 등록해줘야 한다. @grid-ready="onGridReady" 구문을 사용해서 grid 가 준비됨을 알리는 이벤트가 발생하면 onGridReady 를 실행하고 해당 코드에서 리스트너를 등록했다.
const onGridReady = (params: any) => {
gridApi.value = params.api;
gridApi.value.addEventListener('actionCellRenderer:save', handleSave);
gridApi.value.addEventListener('actionCellRenderer:delete', handleDelete);
};
아래는 관련된 소스이다.
댓글 없음:
댓글 쓰기