티스토리 뷰
1. AG-GRID GRID OPTIONS 정의
Attribute |
value |
description |
---|---|---|
columnDefs |
칼럼정보 |
정의된 칼럼 정보를 넣어줘야 합니다. |
rowData |
[{key:value}] |
그리드 데이터, json data를 넣어 줘야 합니다. |
defaultColDef |
기본정의 |
공통 기본 정의 |
* rowSelection |
'single' or 'multiple' |
row data를 선택하는 경우의 옵션으로 하나만 선택하거나 복수개를 선택할 수 있습니다. |
enableColResize |
true | false |
칼럼 리사이즈 허용 여부 |
enableSorting |
true | false |
정렬 옵션 허용 여부 |
enableFilter |
true | false |
필터 옵션 허용 여부 |
enableRangeSelection |
true | false |
정렬 기능 강제여부, true인 경우 정렬이 고정이 된다. |
suppressRowClickSelection |
true | false |
선택 허용 여부 |
animateRows |
true | false |
|
suppressHorizontalScroll |
true | false |
가로 스크롤 허용 여부, 자동 조정으로 되어 있으면 불필요. |
suppressMovableColumns |
true | false |
헤더 고정시키기 |
localeText |
{"key":"value"} |
데이터가 없는 경우 보여 주는 사용자 메시지 {noRowsToShow: '조회 결과가 없습니다.'} |
getRowStyle |
스타일지정 |
row 스타일 지정 e.g. {"textAlign":"center", "backgroundColor":"#f4f4f4"} |
* onGridReady |
event |
(중요) javascript의 onload 이벤트와 유사한 것으로 ready 이 후 필요한 이벤트를 삽입한다. 보통 그리드 자동 사이즈 등을 지정한다. onGridReady: function (event) { event.api.sizeColumnsToFit(); }, |
* onGridSizeChanged |
event |
(중요)창 크기가 변경되었을 때 이벤트 onGridSizeChanged: function(event) { event.api.sizeColumnsToFit(); }, |
* onCellEditingStarted |
event |
(중요)cell 편집을 시작할 때(편집 허용인 칼럼을 더블 클릭할 때) 발생하는 이벤트. |
* onCellEditingStopped |
event |
(중요)cell 편집을 종료할 때(다른 칼럼으로 이동) 발생하는 이벤트. 데이터 수정 시 값을 재 계산 하거나 해당 정보를 별도 관리 할때 이용하는 이벤트로 매우 중요하고 자주 사용이 된다. |
* onCellClicked |
event |
(중요)Cell Click 하는 경우 발생하는 이벤트, 모달 팝업을 띄우거나 다른 페이지로 이동하거나 클릭시 무언가를 처리해야 하는 경우 사용된다. |
* onRowClicked |
event |
(중요)Row Click 하는 경우 발생하는 이벤트, 모달 팝업을 띄우거나 다른 페이지로 이동하거나 클릭시 무언가를 처리해야 하는 경우 사용된다. |
* isRowSelectable |
event |
(중요)특정 Row는 조건에 따라 선택/클릭이 안되게 하고 싶은 경우 사용. |
* onSelectionChanged |
event |
(중요) onRowClicked 이벤트와 유사하다. Row가 선택이 바뀌는 경우 발생하는 이벤트. |
* onSortChanged |
event |
(중요) 정렬이 변경되었을 때 발생하는 이벤트. 외부에서 값을 새로 가져오거나 정렬 조건에 따른 로직을 삽입할 수 있다. |
* onCellValueChanged |
event |
(중요) Cell의 값이 변경 되었을 때 발생하는 이벤트. 데이터 편집에서 수정이 발생하면 그에 따른 처리를 할 때 이용할 수 있다. |
* getRowNodeId |
event |
(중요) RowNodeId를 가져오는 함수로 값을 지정해 두면 그리드에서 데이터를 여기서 정의한 값으로 접근할 수 있다. row nodeId 설정 예제 getRowNodeId : function(data) { return data.goodCd; } 데이터 접근 예제 |
components |
event |
컴포넌트 정의 |
debug |
true | false |
디버그 |
* setPinnedTopRowData | data | 그리드 Top에 데이터 고정 시키기 |
* setPinnedBottomRowData | data | 그리드 Bottom에 데이터 고정 시키기 |
* 전체를 정리한게 아닙니다. 자주 사용하는 목록입니다.
2. 예제
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | var gridOptions = { columnDefs: columnDefs, rowData: students, defaultColDef: { editable: true, width: 100 }, rowSelection: 'single', /* 'single' or 'multiple',*/ enableColResize: true, enableSorting: true, enableFilter: true, enableRangeSelection: true, suppressRowClickSelection: false, animateRows: true, suppressHorizontalScroll: true, localeText: {noRowsToShow: '조회 결과가 없습니다.'}, getRowStyle: function (param) { if (param.node.rowPinned) { return {'font-weight': 'bold', background: '#dddddd'}; } return {'text-align': 'center'}; }, getRowHeight: function(param) { if (param.node.rowPinned) { return 30; } return 24; }, // GRID READY 이벤트, 사이즈 자동조정 onGridReady: function (event) { event.api.sizeColumnsToFit(); }, // 창 크기 변경 되었을 때 이벤트 onGridSizeChanged: function(event) { event.api.sizeColumnsToFit(); }, onRowEditingStarted: function (event) { console.log('never called - not doing row editing'); }, onRowEditingStopped: function (event) { console.log('never called - not doing row editing'); }, onCellEditingStarted: function (event) { console.log('cellEditingStarted'); }, onCellEditingStopped: function (event) { console.log('cellEditingStopped'); }, onRowClicked : function (event){ console.log('onRowClicked'); }, onCellClicked : function (event){ console.log('onCellClicked'); }, isRowSelectable : function(event){ console.log('isRowSelectable'); return true; }, onSelectionChanged : function (event) { console.log('onSelectionChanged'); }, onSortChanged: function (event) { console.log('onSortChanged'); }, onCellValueChanged: function (event) { console.log('onCellValueChanged'); }, getRowNodeId : function(data) { return null; }, // 리드 상단 고정 setPinnedTopRowData: function(data) { return null; }, // 그리드 하단 고정 setPinnedBottomRowData: function(data) { return null; }, components:{ numericCellEditor: NumericCellEditor, moodEditor: MoodEditor }, debug: false }; | cs |
참고
'UI(Front-End) > 그리드' 카테고리의 다른 글
AG-GRID cellRenderer 예제 (5) | 2019.01.30 |
---|---|
AG-GRID 기본 예제 (0) | 2019.01.30 |
AG-GRID 칼럼 정의 (1) | 2019.01.30 |
AG-GRID 설치 및 기본구조 (2) | 2019.01.30 |
AG-GRID 소개 (2) | 2019.01.29 |
- Total
- Today
- Yesterday
- 그리드
- example
- 메시지
- oracle
- 예제
- 타임리프
- springboot
- 샘플
- lombok
- cache
- Javascript
- AG-GRID
- mybatis
- java
- restful서비스
- UI
- listToMap
- 엑셀
- RESTful
- sample
- thymeleaf
- ag grid
- 스프링부트
- 스프링
- spring
- 설정
- Spring Boot
- mapToList
- SHEETJS
- REST
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |