IT/AG Grid 검색 결과
15 개의 검색 결과가 있습니다.
IT/AG Grid

[AG Grid] AG Grid 데이터 가져오는 방법(fetch 사용)

이번 글에서는 저번에는 XMLHttpRequest()를 통해 API로 던졌는데, 이번 글에서는 fetch()를 사용하여 데이터를 가져오는 방법에 대해 글을 기록한다. 2022.12.23 - [IT/AG Grid] - [AG Grid] AG Grid 데이터 가져오는 방법 [AG Grid] AG Grid 데이터 가져오는 방법 이번 글은 AG Grid를 적용하고, 프론트 단에서 백엔드 단으로 API 송신을 하여 데이터를 가져오는 방법에 대해 기록한다. 기존 솔루션에 적용되어 있는 방법과는 확연하게 달라 기록한다. 기존 솔 yongku.tistory.com 저번 글은 위의 URL을 참고하면 된다. AG Grid 기본 세팅 initGrid: function(){ let _this = this; _this.grid..

2023. 1. 11.
IT/AG Grid

[AG Grid] AG Grid 데이터 가져오는 방법

이번 글은 AG Grid를 적용하고, 프론트 단에서 백엔드 단으로 API 송신을 하여 데이터를 가져오는 방법에 대해 기록한다. 기존 솔루션에 적용되어 있는 방법과는 확연하게 달라 기록한다. 기존 솔루션에서는 아래와 같이 JDBC를 통해 쿼리를 실행하고, 실행한 쿼리 결과를 가지고 컬럼 헤더와 데이터를 화살표(↑, ↓ 등)를 사용하여 헤더와 데이터들을 구분하여 적용되어 있는 그리드에 데이터를 뿌렸다. Connection conn = null; PreparedStatement psmt = null; ResultSet rs = null; StringBuilder sb = new StringBuilder(); try { conn = dataSource.getConnection(); psmt = conn.prep..

2022. 12. 23.
IT/AG Grid

[AG Grid] t.map is not a function 에러 해결 방법

이번 글은 AG Grid를 적용하면서, 프론트 단에서 백엔드 단으로 API 송신을 하여 데이터를 가져올 때 프론트 단에서 발생한 t.map is not a function 에러 해결 방법에 대해 기록한다. 아래와 같이, 프론트 단에서 GET 방식으로 해당 URL에 맞게 요청을 보냈다. var httpRequest = new XMLHttpRequest(); httpRequest.open('GET', '/common/search/json/data2.json'); 해당 URL에 맞게 데이터를 받아왔는데, 아래와 같이 t.map is not a function 에러가 발생했다. 해당 에러가 발생한 부분은 아래와 같다. gridOptions.api.setRowData(httpResult); 위의 에러는 httpR..

2022. 12. 23.
IT/AG Grid

[AG Grid] AG Grid 가이드 - Grid 및 관련 Options

이번 글은 AG Grid 공식 가이드 문서에서 제공하고 있는 글에서 Grid 및 관련 Option에 관한 글을 기록한다. AG-Grid를 적용하려니 모르는게 투성이다. 그래서 이렇게 기록한다. 1. Grid 생성 방법 그리드 인스턴스는 새 agGrid를 사용하여 생성됩니다.그리드()가 DOM 요소에 전달되어 그리드 및 그리드 옵션을 호스팅합니다. 1) 문법 new agGrid.Grid를 사용할 때 파라미터는 AG Grid를 적용시킬 태그의 ID인 div ID와 AG Grid의 옵션인 gridOptions 파라미터를 넣어주면 된다. 아래와 같이 사용하면 된다. new agGrid.Grid(div ID, gridOptions); 2) 예시 document.addEventListener('DOMContentL..

2022. 12. 21.
IT/AG Grid

[AG Grid] AG Grid 설치 후 기본 예제

이번 글은 윈도우 10(Windows 10)에서 AG Grid 설치 후 기본 예제에 대해 작성한다. 아래와 같이, 윈도우 10(Windows 10)에서 AG Grid를 설치를 했으면 이제 제대로 그려지는지 확인을 해야 한다. 2022.12.19 - [IT/AG Grid] - [AG Grid] 윈도우 10(Windows 10)에서 AG Grid 설치하기 [AG Grid] 윈도우 10(Windows 10)에서 AG Grid 설치하기 이번 글은 윈도우 10(Windows 10)에서 AG Grid 설치하는 방법을 작성한다. 프로젝트에서 Grid를 사용하는데, AG Grid로 변환 테스트를 진행하려고 한다. 1. 제일 먼저, Windows10 에서 npm을 사용하기 위해 설 yongku.tistory.com 1...

2022. 12. 20.
IT/AG Grid

[AG Grid] AG Grid 가이드 - JS 파일

이번 글은 AG Grid 공식 가이드 문서에서 제공하고 있는 글에서 JS 파일에 관한 글을 기록한다. 1. JS & CSS Import ag-grid-community.min.js 파일을 import 하면 모든 JS와 CSS를 사용할 수 있다. 또한, 부분적으로도 import를 할 수 있으며, 사용하고 싶은 것과 사용하고 싶지 않은 것에 대한 것들도 따로 구분하여 import를 할 수 있다. 아래와 같이, ag-grid-community.min.js를 import 하거나, ag-thema-alpine-dark.js 처럼 테마도 선택할 수 있다. 2. Theme & Style 세팅 AG Grid의 테마 및 스타일은 아래에서 선택해서 import를 하여 사용할 수 있고, 커스터마이징도 할 수 있다. http..

2022. 12. 20.