ag-grid 사용기

프로젝트 요청사항에 ag-grid가 있어서 어쩔 수 없이(?) 사용해보았다.

처음 사용할 땐 역시 getting started.

간단하게 적용할 땐 문제 없는데 몇 가지 적용하려고 하니 guide의 부실함이 느껴졌다.

열심히 업데이트 중이라 코드와 가이드의 갭이 크다 'ㅁ'...

기본적으로 사용하는 방식은 아래와 같다

var columnDefs = [
    {headerName: "Make", field: "make"},
    {headerName: "Model", field: "model"},
    {headerName: "Price", field: "price"}
];

var rowData = [
    {make: "Toyota", model: "Celica", price: 35000},
    {make: "Ford", model: "Mondeo", price: 32000},
    {make: "Porsche", model: "Boxter", price: 72000}
];

var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData
};

document.addEventListener("DOMContentLoaded", function() {
    var eGridDiv = document.querySelector('#myGrid'); //jquery 변환가능
    new agGrid.Grid(eGridDiv, gridOptions);
});

columnDefs

- headerName: 리스트에 노출할 항목 명

- field: rowData에 들어가 있는 key값

rowData

- object, server에서 array를 json 받아서 사용

gridOptions

- grid 관련 기능들 추가할 수 있다

그 외에 내가 사용했던 option들

gridOptions

- enableSorting: true | fales(default) //정렬기능을 제공한다, header 클릭 시 [asc, desc, null] 순으로 정렬, 정렬 순서와 정렬 종류는 변경이 가능하다

- rowSelection: 'single' | 'multiple' | none(default) //row 선택기능, 수정하거나 가져올 때 필요

- onCellDoubleClicked: function(){} //셀 더블 클릭 시 이벤트 발생. 해당 셀 값을 가져오기 위해서 썼음

- onModelUpdated: function(){} //grid 변경 시 업데이트할 때 호출하는 함수, row 개수 가져오기 위해 썼음

- isExternalFilterPresent, doesExternalFilterPass: 검색 기능, isExternalFilterPresent가 true일 경우 doesExternalFilterPass 함수가 실행, input, select 값 변경하여 검색할 때 썼음

columnDefs

- suppressSorting: true // enableSorting이 true일 경우 모든 header 클릭이 가능한데 이걸 못하게 하는 옵션.

- sort: 'asc' | 'desc' //grid에서 처음 노출될 때의 정렬방식

- cellRender: function(params){ return .. } //matching된 value를 grid에 노출 전에 변경

아까부터 이야기하는 거지만 guide가 올드 버전이고

사용자의 의견을 개발자가 적극 반영하고 있던 터라 매우 자주 바뀌..는 것 같다

안되거나 필요한 기능은 구글 검색하거나 함수를 출력하여 확인하는 것이 빠르다 ㅠ

그리고 가능하면 최신버전을 쓰자 ;ㅅ;

(ex. gridOptions.api.getModel()의 함수 중 getRowCount가 getVirtualRowCount로 변경됨)