[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. JSP 파일을 한 개 만들어서 아래의 코드를 긁어 붙여넣기를 한다.

- 아래의 코드는 참고자료 URL에 있는 코드를 가져왔다.( + gitHub)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>WMS</title>
<!-- <script src="https://unpkg.com/ag-grid/dist/ag-grid.min.js"></script> -->
		<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-thema-alpine-dark.js"></script>
		<script type="text/javascript">
			// 컬럼 정의	
			var columnDefs = [
	    		{headerName:"Athlete", field: "athlete", width: 150, minWidth:120, pinned:'left', suppressSizeToFit: true, suppressMenu: true, sort: 'asc'},
	    		{headerName:"Age", field: "age", width: 90, minWidth: 50, maxWidth: 100, pinned:'left', suppressMenu: true, suppressSorting : true},
	    		{headerName:"Country", field: "country", width: 120},
	    		{headerName:"Year", field: "year", width: 90},
	    		{headerName:"Date", field: "date", width: 110},
	    		{headerName:"Sport", field: "sport", width: 110},
	    		{headerName:"Gold Medal", field: "gold", width: 100},
	    		{headerName:"Silver Medal", field: "silver", width: 100},
	    		{headerName:"Bronze Medal", field: "bronze", width: 100},
	    		{headerName:"Total", field: "total", width: 100}
				];
			
			// 그리드 옵션 정의
			var gridOptions = {
				    defaultColDef: {
				        sortable: true,
				        resizable: true
				    },
				    debug: true,
				    columnDefs: columnDefs,
				    rowData: null,
				    onGridReady: function() {
				        gridOptions.api.addGlobalListener(function(type, event) {
				            if (type.indexOf('column') >= 0) {
				                console.log('Got column event: ', event);
				            }
				        });
				    }
				};
	
		
			
			document.addEventListener('DOMContentLoaded', function() {
			    // div id 설정
			    var gridDiv = document.querySelector('#myGrid'); 
			    // ag-grid 생성     
			    new agGrid.Grid(gridDiv, gridOptions); 
			 
			    var httpRequest = new XMLHttpRequest();
			    httpRequest.open('GET', 'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json');
			    httpRequest.send();
			    httpRequest.onreadystatechange = function() {
			        if (httpRequest.readyState === 4 && httpRequest.status === 200) {
			            var httpResult = JSON.parse(httpRequest.responseText);
			            // 데이터 삽입
			            gridOptions.api.setRowData(httpResult); 
			        }
			    };
			});
		</script>
	</head>
	<body>
		<div class="grid-wrapper">
    		<div style="width: 100%; height:580px" id="myGrid" class="ag-grid-div ag-theme-balham ag-basic"></div>
		</div>
	</body>
</html>

그러면, 아래와 같이 화면이 나온다.

2. AG Grid 컬럼 정의

<script type="text/javascript">
			// 컬럼 정의	
			var columnDefs = [
	    		{headerName:"Athlete", field: "athlete", width: 150, minWidth:120, pinned:'left', suppressSizeToFit: true, suppressMenu: true, sort: 'asc'},
	    		{headerName:"Age", field: "age", width: 90, minWidth: 50, maxWidth: 100, pinned:'left', suppressMenu: true, suppressSorting : true},
	    		{headerName:"Country", field: "country", width: 120},
	    		{headerName:"Year", field: "year", width: 90},
	    		{headerName:"Date", field: "date", width: 110},
	    		{headerName:"Sport", field: "sport", width: 110},
	    		{headerName:"Gold Medal", field: "gold", width: 100},
	    		{headerName:"Silver Medal", field: "silver", width: 100},
	    		{headerName:"Bronze Medal", field: "bronze", width: 100},
	    		{headerName:"Total", field: "total", width: 100}
				];
</script>

3. AG Grid gridOptions 정의

<script type="text/javascript">
	// 그리드 옵션 정의
	var gridOptions = {
	    defaultColDef: {
	        sortable: true,
	        resizable: true
	    },
		    debug: true,
		    columnDefs: columnDefs,
		    rowData: null,
		    onGridReady: function() {
		        gridOptions.api.addGlobalListener(function(type, event) {
		            if (type.indexOf('column') >= 0) {
		                console.log('Got column event: ', event);
		            }
		        });
		    }
	};
</script>

4. AG Grid 생성 및 데이터 삽입

여기서, myGrid라는 div를 가지고 와서, 그 부분에 AG Grid를 생성한다.

document.addEventListener('DOMContentLoaded', function()은 HTML 및 Script가 로드된 시점에서 실행이 된다.

<script type="text/javascript">
	//HTML 및 Script가 로드된 시점에서 실행
	document.addEventListener('DOMContentLoaded', function() {
	    // div id 설정
	    var gridDiv = document.querySelector('#myGrid'); 

		// ag-grid 생성     
	    new agGrid.Grid(gridDiv, gridOptions); 
			 
	    var httpRequest = new XMLHttpRequest();
	    httpRequest.open('GET', 'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json');
	    httpRequest.send();
	    httpRequest.onreadystatechange = function() {
	        if (httpRequest.readyState === 4 && httpRequest.status === 200) {
	            var httpResult = JSON.parse(httpRequest.responseText);
	            // 데이터 삽입
	            gridOptions.api.setRowData(httpResult); 
	        }
	    };
	});
</script>

5. HTML BODY 태그 안에 아래 코드 추가

<div class="grid-wrapper">
	<div style="width: 100%; height:580px" id="myGrid" class="ag-grid-div ag-theme-balham ag-basic"></div>
</div>

참고자료

https://eblo.tistory.com/30

https://github.com/ag-grid/ag-grid

저작자표시

'IT > AG Grid' 카테고리의 다른 글

[AG Grid] AG Grid 데이터 가져오는 방법(fetch 사용) (0)	2023.01.11
[AG Grid] AG Grid 데이터 가져오는 방법 (0)	2022.12.23
[AG Grid] t.map is not a function 에러 해결 방법 (0)	2022.12.23
[AG Grid] AG Grid 가이드 - Grid 및 관련 Options (0)	2022.12.21
[AG Grid] AG Grid 가이드 - JS 파일 (0)	2022.12.20
[AG Grid] AG Grid 참고 URL 정리 (0)	2022.12.20
[AG Grid] 윈도우 10(Windows 10)에서 AG Grid 설치하기 (0)	2022.12.19
[AG Grid] AG Grid 비용에 대한 정리 (7)	2022.11.12