Ag Grid 속성
rowSelection
- 행 선택 유형
- 'single' : 단일 행 선택
- 'multiple' : 여러 행 선택
rowMultiSelectionWithClick
- 'true'이면 여러 행을 선택할 수 있도록 선택
suppressRowClickSelection
- 'true'이면 행 클릭 시 select 및 check가 되지 않음
suppressHorizontalScroll
- 'false'이면 가로 스크롤바 표시 안함
- 행 크기가 자동 조절일 때 사용
Ag Grid 칼럼 속성
headerCheckboxSelection
- 전체 체크박스가 가능한 헤더 체크박스
- 무한 스크롤에서는 해당 기능이 제공되지 않음
checkboxSelection
- 각 행마다의 체크박스
- 무한 스크롤에서 해당 기능 사용 가능
dndSource- 'true'일 경우 해당 컬럼 드래그앤드랍 기능
무한 스크롤 관련 속성(infinite scroll)
rowBuffer
- 눈에 보이는 그리드 영역 외부의 행의 수를 설정
- 예를 들어 rowBuffer가 10이고 그리드에 50개의 행이 표시되는 경우, 그리드는 실제로 총 70개(위에 10개, 아래 10개를 더 추가한다.)
- 기본값 : 10
rowSelection
- 행 선택 유형
- 값으로는 'single'또는 'multiple'이 있음
- 'single' : 단일 행 선택, 행을 선택하면 이전에 선택한 행이 선택 취소된다.
- 'multiple' : 여러 행을 선택할 수 있다.
rowModelType
- 행 모델 유형을 설정
- 기본값 : `clientSide`
- 옵션 : `clientSide`, `infinite`, `viewport`, `serverSide`
- 무한 스크롤 시에는 `infinite`가 필수
cacheOverflowSize
- 스크롤이 다 내려가고 난 뒤 새로 업데이트를 해줄 행 수를 설정
maxConcurrentDatasourceRequests
- 동시에 서버에 도달할 요청 수. 최대값에 도달하면 요청이 대기열에 추가된다.
- 기본값 : 1
infiniteInitialRowCount
- 처음에 로딩모양이 뜨는 갯수
- paginationPageSize가 처음 불러오는 행의 개수이니 두 속성의 값을 맞추어주면 좋은 것 같다.
maxBlocksInCache
- (부분 저장소만 해당) 저장소에 보관할 블록 수.
- 기본값은 제한이 없으므로 요청된 모든 블록이 유지됩니다. 메모리 문제가 있는 경우 이 기능을 사용하고 제한에 도달하면 가장 최근에 본 블록이 제거됩니다. 그리드는 또한 이 속성이 낮은 값으로 설정된 경우 현재 보이는 것을 표시하는 데 필요한 모든 블록이 있는지 확인합니다.
Ag Grid API
getSelectedRows
- 선택한 행의 데이터를 가져오는 api 메서드
- this.gridOptions.api.getSelectedRows
Ag Grid Filtering 및 Sort
isFilterActive() 메서드
- filter모양이 활성화되는지 여부를 나타내는 메서드
doesFilterPass(params) 메서드
- 필터링으로 그리드에 보여줄 데이터를 선별하는 메서드
- 필터링 내용이 들어가는 메서드- return이 true이면 보여주고 false면 해당 데이터 숨기는 기능
getModel() 메서드
- 데이터를 반환하는 메서드
'Vue' 카테고리의 다른 글
[Vue] Vue-cli2 프로젝트 생성 및 실행 (0) | 2021.11.21 |
---|---|
[Vue] Vue-cli 2 설치 방법 및 버전 확인 (0) | 2021.11.21 |