토스트 그리드를 통한 공공데이터 제어 프로젝트[2] - Toast Grid

토스트 그리드를 사용하려면 cdn이나 파일 자체가 필요합니다.

저의 경우 cdn을 통해 사용하였습니다.

 

https://ui.toast.com/tui-grid

TOAST UI :: Make Your Web Delicious!

 

https://github.com/nhn/tui.grid/tree/master/packages/toast-ui.grid

GitHub - nhn/tui.grid: 🍞🔡 The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer!

 

위 링크를 들어가면 cdn을 얻을 수 있습니다.

cdn 찾는 일부터 쉽지 않았던 기억에 링크를 올립니다..ㅎㅎ

 

https://nhn.github.io/tui.grid/latest/tutorial-example01-basic

https://nhn.github.io/tui.grid/latest/tutorial-example01-basic/

 

위 링크는 토스트 그리드의 예제 중 제가 사용한 예제입니다.

결과 이미지, 자바스크립트, html 코드가 있기 때문에 곧바로 사용하기는 편했습니다.

 

			 $.ajax({
				url : "/togongda/getBoardList",
				method : "POST",
				dataType : "JSON",
				contentType : "application/json; charset=UTF-8",
				success : function(result) {
					console.dir(result);

					var grid = new tui.Grid({
						el : document.getElementById('grid'),
						scrollX : false,
						scrollY : false,
					
						columns : [ {
							header : '게시글 제목',
							name : 'board_title'
						}, {
							header : '작성 날짜',
							name : 'board_date'
						}, {
							header : '글 번호',
							name : 'board_no'
						}, {
							header : '첨부파일 유무',
							name : 'board_file_check'
						} ]

					}); //grid 

					grid.resetData(result);
				}// suc
			}); //ajax

공공데이터를 제어하기 전 그리드가 잘 작동하는지 확인하기 위해 테스트 코드를 작성했었습니다.

 

	@PostMapping("/getBoardList")
	public List<BoardModel> getBoardList() throws IOException, ParseException {
		List<BoardModel> result = boardService.boardList();

		return result;
	}

잘 출력되는 것을 확인 후 공공데이터를 그리드에 넣기 위해 모두 주석문 처리시켜주었습니다.

 

---

우선 페이지를 열자마자 그리드가 비어있는 것도 그렇고 공공데이터를 잘 가져온 걸 확인하고 싶어서

데이터를 받아올 수 있도록 컨트롤러에서 오늘의 날짜와 경기 지역을 선택한 상태에서 데이터를 보낼 수 있도록 했습니다.

 

@PostMapping("/getCovidList")
	public List<Map<String, Object>> getCovidList(HttpServletRequest req) throws IOException{
		
		//어제 날짜 구하기 
		Calendar c1 = Calendar.getInstance(); 
	    c1.add(Calendar.DATE, -1); // 오늘날짜로부터 -1 
	    SimpleDateFormat transFormat = new SimpleDateFormat("yyyy-MM-dd");
			
	    String yesterday = transFormat.format(c1.getTime()); // String으로 저장
	      		
		
		String xml = getCovidData(yesterday,"경기");		
		Object json = XML.toJSONObject(xml); //xml -> json
        String jsonStr = json.toString(); // json -> string
    
        JsonParser jsonParser = new JsonParser();
        JsonObject jsonObject = (JsonObject)jsonParser.parse(jsonStr); 
        
        
        JsonObject covidInfoResponse = (JsonObject)jsonObject.get("response");
        JsonObject covidInfoBody = (JsonObject)covidInfoResponse.get("body"); // pageNo, totalCount
        JsonObject covidInfoItems = (JsonObject)covidInfoBody.get("items");
        
        JsonArray covidInfoItem = (JsonArray)covidInfoItems.get("item");   //item은 배열 형태 이기 때문에 JsonArray 형태로 변환
               
        List<Map<String, Object>> result = null; //마지막에 return할 List 선언
		result = new ArrayList<>();  //list 초기화

        
        if (covidInfoItem != null) { 
           int len = covidInfoItem.size(); //JsonArray의 개수를 len에 대입
           for (int i=0;i<len/2;i++){ //배열 크기만큼 반복
        	  JsonObject jso = (JsonObject) covidInfoItem.get(i); //JsonArray안에 있는 값들의 순서대로 JsonObject로 변환
        	  Map<String, Object> map = getMapFromJsonObject(jso); //변환한 JsonObject는 JSONObject를 Map<String, String> 형식으로 변환처리
        	  result.add(map); //변환한 jso가 담긴 map이 list에 순서대로 담음
        } 
        }
        

        return result; // 담은 result를 ajax에게 넘겨줌 
	}

 

파라미터에 필요한 날짜와 경기 값을 넣고 String 타입의 xml에 공공데이터 값을 받아오는 메서드의 결과값을 넣었습니다.

 

공공데이터가 xml과 json 타입 형태를 선택해서 받을 수 있다고 하는데 아무리 해도 xml 형태밖에 보여주지 않아

직접 xml 형태의 코드를 json 형태로 변환했습니다.

 

그 이후 JsonObject의 데이터 중 필요한 값만 가져오기 위해 빼오는 작업을 해줬습니다.

 

이 중 실질적으로 필요한 데이터는 item 값만 필요하기 때문입니다.

 

이후 출력한 item들의 개수의 절반만큼을 map에 담아주고 마지막에 리스트에 담아줍니다.

(item의 개수만큼 반복시키면 데이터가 딱 2배만큼 중복돼서 절반으로 나누어 해결했습니다)

 

그 이후 result를 ajax에 던져주면 되겠죠?

 

			$.ajax({
				url : "/togongda/getCovidList",
				method : "POST",
				dataType : "JSON",
				contentType : "application/json; charset=UTF-8",
				success : function(list) {
					console.dir(list);

					grid1.resetData(list);
				}// suc
			}); //ajax

기존 테스트 코드와 다른 점이 있다면 resetData는 동일하나 그리드를 성공 시 만들지 않았습니다.

 

이런 식으로 전역 변수로 gird1이라는 그리드를 우선 선언했습니다.

이후 계속해서 그리드와 파라미터 값에 따라 그리드 내부의 데이터가 바뀔 것이기 때문입니다.

 

 

결과 화면입니다.

 

---

다음 게시글에서는

공공데이터를 코로나 관련 데이터를 선택했기 때문에 날짜와 지역명을 선택할 수 있는 파라미터를 받을 수 있는

날짜 선택과 체크박스를 추가하고 제어하는 내용을 다루도록 하겠습니다.