분류 전체보기 썸네일형 리스트형 AG-GRID - 엑셀 내보내기 기능, CVS 내보내기 기능 AG-GRID - 엑셀 내보내기 기능, CVS 내보내기 기능 1. 엑셀 내보내기 기능 2. CSV 내보내기 기능 1. 엑셀 내보내기 기능 html head에 추가 /head body에 추가 api.exportDataAsExcel(params) script에 추가 function onBtnExportDataAsExcel() { gridOptions.api.exportDataAsExcel(); } /script /body /html 2. CSV 내보내기 기능 html head /head body에 추가 api.exportDataAsCsv(params) script에 추가 function onBtnExportDataAsCsv() { gridOptions.api.exportDataAsCsv(); } /scrip.. 더보기 AG-GRID, 추가된 행에 색상 적용 AG-GRID, 버튼을 이용하여 행 추가 및 추가된 행에 색상 적용 1. 태그 안에 추가 //추가 버튼을 누르면 실행되는 함수 function onBtAdd() { var selectedData = gridOptions.api.getSelectedRows(); gridOptions.getRowStyle = function() { if (selectedData === selectedData) { return { background: 'red' } } } var newItem = createNewRowData(); var res = gridOptions.api.updateRowData({add: [newItem]}); } 2. 태그 안에 추가 추가 AG-GRID 연관 글 AG-GRID, AG-GRID 테이블.. 더보기 AG-GRID, 전체 행 색상 변경 전체 행 색상 변경 script 태그 안에 코드 추가 var colorIndex = 0; var colors = ['blue', 'red', 'green', 'brown']; - var gridOptions = {}; 에 추가 getRowStyle: function() { return { backgroundColor: colors[colorIndex], }; } - function 함수 2개 추가 function progressColor() { colorIndex++; if (colorIndex === colors.length) { colorIndex = 0; } } function redrawAllRows() { progressColor(); gridOptions.api.redrawRows(); } b.. 더보기 AG-GRID, 선택한 행 데이터 추출 기능 1. onSelectionChanged: onSelectionChanged, - 버튼에 적용할거면 코드 제외할 것 2. function 함수 추가 - 1) 또는 2) 선택 1 - gridOptions2 변수는 gridOptions로 수정 권고 :D 1) 하나의 행 데이터 추출시 하나의 행만 선택시 -> rowSelection: 'single' 하나의 행만 선택, 하나의 데이터만 출력시 function onSelectionChanged() { var selectedRows = gridOptions2.api.getSelectedRows(); document.querySelector('#selectedRows').innerHTML = selectedRows.length === 1 ? selectedRows[0.. 더보기 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 설정안하면 행 선택이 안되고 하나의 셀이 .. 더보기 이전 1 2 3 4 5 다음
