AG-GRID 썸네일형 리스트형 AG-GRID, 수직 가운데 정렬 AG 그리드 헤더 제외한 모든 데이터들을 수직 가운데 정렬 - style 태그에 추가 .ag-row .ag-cell { display: flex; justify-content: center; /* align horizontal */ align-items: center; } AG-GRID 연관 글 AG-GRID, AG-GRID 테이블 생성, 버튼 추가 : https://justdo-heal.tistory.com/23 AG-GRID, AG-GRID 행 넓이 자동 조절, 행 높이 설정, 행 여러 줄 기능 : https://justdo-heal.tistory.com/24 AG-GRID, 행 높이 자동 조절 추가 관련 조사 : https://justdo-heal.tistory.com/25 AG-GRID 버튼을 이.. 더보기 AG-GRID, 콘솔 로그 기록 기능 행 추가, 행 삭제시 콘솔 로그 기록 기능 - 행 추가, 행 삭제에 해당하는 function{}안에 변경정보를 res로 정의 후 콘솔로그에 res를 출력한다. - 행 추가, 행 삭제 버튼 이외에도 행 조작시 해당 버튼에 추가하면 콘솔 로그 기록 기능이 수행된다. (1) - 행 추가, 행 삭제 function 안에 추가. - res 정의 후 출력하는 흐름 var res = gridOptions.api.updateRowData({add: [newItem]}); var res = gridOptions.api.updateRowData({remove: selectedData}); printResult(res); (2) function printResult(res) { console.log('------------.. 더보기 AG-GRID, AG-GRID 셀 편집 기능 AG-GRID 셀 편집 기능 - 전체 셀 편집은 var gridOptions = {} > defaultColDef: {} 안에 추가한다. - 해당 셀만 편집은 var columnDefs = [];의 해당 열 안에 추가한다. AG-GRID, 셀 편집 기능 코드 - script 태그 안에 추가 editable: true 코드 추가한 부분적 모습 : var gridOptions = { defaultColDef: { resizable: true, sortable: true, editable: true }, columnDefs: columnDefs, rowData: null, onColumnResized: onColumnResized, onGridReady: function(params) { setTimeout(.. 더보기 AG-GRID 버튼을 이용한 행 추가, 행 삭제 기능 버튼을 이용한 행 추가, 행 삭제 기능 - 형광펜 칠한 부분을 참고 :) 추가한 코드 부분 화면 : html > body 태그 추가 삭제 script 태그 var gridOptions = { defaultColDef: { resizable: true, sortable: true }, columnDefs: columnDefs, rowData: null, onColumnResized: onColumnResized, onGridReady: function(params) { setTimeout(function () { params.api.setRowData(data); }, 2000); }, rowSelection: 'multiple' //추가한 코드. multiple 설정안하면 행 선택이 안되고 하나의 셀이 .. 더보기 AG-GRID, 행 높이 자동 조절 추가 관련 조사 행 높이 자동 조절 추가 관련 조사 행 높이 자동 조절 추가에 대해 조사하면서 알게된 것들 몇가지 적어본다. 도움이 되시길.. 추가 (1) 추가 (2) - var gridOptions = { 안에 코드를 추가한다. - 이건 기존 코드에 있는 건데, 없으면 값이 안 나타난다. onGridReady: function(params) { setTimeout(function () { params.api.setRowData(data); }, 2000); } - 행 조절 관련 코드 추가 onColumnResized: onColumnResized, 추가 (3) - 행 필요한 높이 확인 function onColumnResized() { gridOptions.api.resetRowHeights(); } 추가 (4) - .. 더보기 AG-GRID, AG-GRID 행 넓이 자동 조절, 행 높이 설정, 행 여러 줄 기능 AG-GRID 행 자동 조절 기능 1. 행 넓이 자동 조절 기능 : 열 개수에 맞춰 넓이 자동 조절 2. 행 높이 조절 기능 : 행 높이 설정 3. 여러 줄로 나타내기 기능 : 행 여러 줄로 나타내는 기능 행 넓이 자동 조절 기능 : 열 개수 넓이에 맞게 자동 조절 기능 - var gridOptions에 추가한다. onGridReady: function (event) { event.api.sizeColumnsToFit(); } 추가된 코드 부분 var gridOptions = { defaultColDef: { sortable: true, resizable: true, filter: true }, columnDefs: columnDefs, rowData: null, onGridReady: function .. 더보기 AG-GRID, AG-GRID 테이블 생성, 버튼 추가 AG-GRID 테이블 생성 1. ag-grid 테이블 생성 1) AG-GRID 번들 추가 2) AG-GRID 테이블 생성 2. 한글 출력 기능 3. 버튼 기능 1) AG-GRID 번들 추가 - head 태그 안에 추가 " target="_blank" rel="noopener">unpkg.com/@ag-grid-enterprise/all-modules@22.1.2/dist/ag-grid-enterprise.min.js'> 2) AG-GRID 테이블 생성 - Body 태그 안에 추가 2. 한글 출력 기능 1) head 태그 안에 추가 2) body 태그 안에 추가 3. 버튼 기능 - body 태그 안에 추가 적용 해당 코드 추가한 부분적 모습 : AG-GRID 테이블 추가 삭제 적용 AG-GRID 연관 글 .. 더보기 이전 1 2 다음
