본문 바로가기

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

개발의 각궁

Spring | Spring MVC | Spring Boot | Spring Security | Mysql | Oracle | PostgreSQL | Mybatis | JPA | Angular.js | Vue.js | Nuxt.js | React.js | TypeScript | JSP | Frontend | Backend