[Library] AG-Grid

본문링크 : https://eblo.tistory.com/32

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;  } 데이터 접근 예제 var rowNode = gridOptions.api.getRowNode(selectedRow.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 }; Colored by Color Scripter

cs