본문 바로가기

AG-GRID

AG-GRID, AG-GRID 열을 열기&닫기 기능 AG-GRID 열 컬럼 열고 닫는 기능 - 형광펜 부분의 코드를 참고 :) var columnDefs = [ ]; 에서 테이블 컬럼 선언하는 부분에 테이블 열을 열고 닫는 기능을 설정할 열 컬럼에 children 변수를 선언하여 그 안에 열 선언하면서 columnGroupShow: 'close' 코드를 추가하면 된다. 열을 나타내는 상태에서 접는 기준의 열에는 close를, 열이 보이지 않는 상태로 나타내고자하는 열에는 open을 선언한다. 열 닫힌 상태 : 열 열린 상태 : var columnDefs = [ {headerName: "1", field: "m1"}, {headerName: "2", field: "m2"}, {headerName: "3", field: "m3"}, {headerName: ".. 더보기
AG-GRID, AG-GRID 2개 생성 AG-GRID 테이블 2개 생성 1. var gridOptions1, var gridOptions2, 등 변수명 변경 2. AG-GRID 테이블 생성시 스크립트 태그를 별도로 분리하여 각각 스크립트 태그에 해당하는 테이블 생성한다. 1. var gridOptions1, var gridOptions2, 등 변수명 변경 - 형광펜 부분을 보면, gridOptions 변수명 뒤에 숫자만 바꿔서 선언했다. ex) var gridOptions2 = { defaultColDef: { resizable: true, editable: true }, columnDefs: columnDefs, rowData: rowData, onFirstDataRendered: onFirstDataRendered }; 2. AG-GRID.. 더보기
AG-GRID, AG-GRID 검색 필터 기능 AG-GRID 검색 필터 기능 - 형광펜 표시한 코드 부분을 삽입하시면 검색 필터 기능을 수행할 수 있다. :) 검색 전 검색 후 예시 : 더보기
AG-GRID, 체크 박스 기능 추가 AG-GRID, 체크 박스 기능 추가 - var columnDefs = [ ]; 부분에 첫번째 열에 해당 코드 추가 headerCheckboxSelection: true, checkboxSelection: true 예시 : var columnDefs = [ { headerName: "이름", field:"name", width:90, cellClass: 'cell-wrap-text', headerCheckboxSelection: true, checkboxSelection: true } ]; AG-GRID 연관 글 AG-GRID, AG-GRID 테이블 생성, 버튼 추가 : https://justdo-heal.tistory.com/23 AG-GRID, AG-GRID 행 넓이 자동 조절, 행 높이 설정, 행 .. 더보기
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.. 더보기

티스토리툴바