[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.prepareStatement(pdata.getString("sql"));
	List paramValueList = (List) pdata.get("paramValueList");
	Object param;
	for (int i = 0; i < paramValueList.size(); i++) {
		param = paramValueList.get(i);
		psmt.setString(i + 1, param.toString());
	}

	rs = psmt.executeQuery();
	ResultSetMetaData rsmd = rs.getMetaData();
}

이하 생략

 

근데, 이렇게 적용되어 있는 그리드와 솔루션에 AG Grid를 적용하는 방법이 완전히 달라 저 부분을 바꿨다. AG Grid는 JSONArray 형식으로 만들어서 가져와야 한다.

 

작업한 것을 기록한다.

 

1. web.xml에서 servlet-mapping 태그에 URL 매핑인 .json 추가하기.

AG Grid를 사용할 때, 아래와 같이 httpRequest를 보내면 뒤에 .json이 붙는다. 아래의 httpRequest URL에 .data나 .page를 넣어도 뒤에 항상 .json이 붙어서 URL을 맞추는데 어려움이 있었다.

var httpRequest = new XMLHttpRequest();
httpRequest.open('GET', '/common/search/json/data2.json');
httpRequest.send();

httpRequest.onreadystatechange = function() {
	if (httpRequest.readyState === 4 && httpRequest.status === 200) {
	var httpResult = JSON.parse(httpRequest.responseText);
	// 데이터 삽입
	gridOptions.api.setRowData(httpResult.data); 
	}
};

 

web.xml에 추가하는 방법은 아래의 링크에서 확인할 수 있다.

2022.12.23 - [IT/스프링(Spring)] - [스프링/Spring] 스프링 프레임워크(Spring Framework) RequestMapping URL 설정하는 방법(web.xml)

[스프링/Spring] 스프링 프레임워크(Spring Framework) RequestMapping URL 설정하는 방법(web.xml)

 

2. 아래와 같이, Controller에서 RequestMapping URL에 따라 API URL과 매핑이 되면 map에 setModuleCommand에 따라 쿼리가 매핑이 되고 getJdbcData를 통해 쿼리의 해당 데이터를 JSONArray 타입으로 가져와서 프론트에 쏴주면 된다.

@RequestMapping("/common/search/json/data2.*")
public String searchList2(HttpServletRequest request, Map model) throws SQLException, InterruptedException{		
	DataMap map = (DataMap)request.getAttribute(key);
	map.setModuleCommand("xml namespace", "쿼리 ID");
		
	JSONArray listData = test.getJdbcData2(map);

	model.put("data", listData);
		
	return JSON_VIEW;
}

 

3. 쿼리의 결과를 JSONArray 타입으로 가져오는 코드는 아래와 같다.

public JSONArray getJdbcDataPY(DataSource dataSource, DataMap pdata) throws SQLException {
		
		JSONArray jary = new JSONArray();
		
		Connection conn = null;
		PreparedStatement psmt = null;
		ResultSet rs = null;
		StringBuilder sb = new StringBuilder();
		try {
			conn = dataSource.getConnection();
			psmt = conn.prepareStatement(pdata.getString("sql"));
			List paramValueList = (List) pdata.get("paramValueList");
			Object param;
			for (int i = 0; i < paramValueList.size(); i++) {
				param = paramValueList.get(i);
				psmt.setString(i + 1, param.toString());
			}

			rs = psmt.executeQuery();
			
			while (rs.next()) {                 
                JSONObject obj = new JSONObject();
                ResultSetMetaData rsmd = rs.getMetaData();
                int total_rows = rsmd.getColumnCount();
                
                for (int i=0; i<total_rows; i++)
                {
                    String columnName = rsmd.getColumnLabel(i+1);
                    Object columnValue = rs.getObject(i+1);
                    obj.put(columnName, columnValue);
                }
                
                jary.add(obj);
            }
			
		} catch (SQLException e) {
			e.printStackTrace();
			throw e;
		} finally {
			try {
				if (rs != null) {
					rs.close();
				}
			} catch (Exception e) {
				e.printStackTrace();
			}
			try {
				if (psmt != null) {
					psmt.close();
				}
			} catch (Exception e) {
				e.printStackTrace();
			}
			try {
				if (conn != null) {
					conn.close();
				}
			} catch (Exception e) {
				e.printStackTrace();
			}
		}

		return jary;
	}

 

4. 위에서 쿼리에 대한 결과를 JSONArray 타입으로 받아와서 model에 data라는 키에 value로 담는다. 그래서, data : value 이런식으로 담기기 때문에 프론트에서는 data 껍질을 벗겨줘야 한다.

model.put("data", listData);

 

아래와 같이 httpResult로 결과를 받아오는데, httpResult.data로 꺼내서 setRowdata를 하면 된다.

gridOptions.api.setRowData(httpResult.data);

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', '/common/search/json/data2.json');
// 			    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.data); 
			        }
			    };
			});