[JAVA/Spring] 체크 박스의 값을 목록(리스트)에 같이 보여 주기

이번 포스팅은 체크박스로 체크한 데이터 들을 

게시판 목록(리스트)에 하나하나 뿌려주기 위해서 고민했던 내용에 대해 적어 보려고 합니다.

카드형으로 리스트를 출력해 줘야 하는데

카드 안에 각 게시물의 체크박스 데이터를 아이콘으로 같이 출력해 주는 내용입니다.

우선 내용을 정리해 보면

• 게시판 목록(리스트)에 체크박스에 선택된 값들을 출력을 해야한다.
  이때 그냥 체크값을 출력하면 사용자들은 모르기 때문에 그 값에 해당하는 적당한 값을 표시해 줘야 한다.

• 문제는체크 박스로 체크한 데이터들은 각각의 컬럼에 저장되는 것이 아니라
  하나의 컬럼에 쉼표(,)를 구분자로 해서 저장된다.

• 화면에 뿌려 주려면 각 값들을 모두 분리해서 각각 변수에 담아야 한다.
  
  
• 체크값은 각 글마다 몇개가 선택되어 있는지 알 수 없으므로 일반 변수에 담는 것보다는 배열을 이용하는 것이 좋겠다.
  
  
• 따라서 View(화면)에 넘겨 주기 전에 문자열 분리를 통해 체크값들을 하나의 배열에 담은 뒤
  리스트에서 처리가 가능하도록 다시 리스트에 담은 뒤 데이터를 전송한다.
  
  
• 화면에서는 for 문을 2번 사용함으로써 이 문제를 해결한다.
  첫번째 for 문은 전체 리스트를 출력하기 위한 for 문이고
  두번재 for 문은 체크리스트를 표현하기 위한 for 문이다.

처음에 조금 막막했었는데

하나씩 문제를 뜯어보고 나니 해결 방법이 보입니다.

Java(Controller) 에서의 처리
1. 리스트 읽어 오기

자 그럼 일단은 목록을 불러 와야 겠죠.

List<boardVO> boardList = boardService.getBoardList();

service 이하 부분은 생략하기로 합니다.

이 포스팅에서 중요한 이야기는 어떻게 데이터를 DB에서 읽어오느냐 하는 부분이 아니니까요.

2. 체크박스 데이터(문자열)를 배열로 전환하기

  2-1. 체크박스 데이터를 배열로 변환

    우선 전체 리스트에 접근하는 for 문을 만들어 봅니다.

for(boardVO item : boardList)

//체크박스 문자열을 배열로 저장

}

  2-2. 체크리스트 안의 값을 배열로 저장 하기위해 배열을 하나 선언합니다.

    그리고 선언한 배열에 체크리스트를 split를 이용해 배열을 만들어 저장합니다.

for(boardVO item : boardList) {

String[] checkList = item.getCheckList().split(",");            

//체크리스트가 저장된 값(컬럼)을 CheckList로 받아오고 있습니다.

}

  2-3 배열로 만든 값(checkList)을 다시 리스트의 요소에 담습니다.

item.setCheckValue(checkList);

3. 데이터를 뷰로 넘기기

   model.addAttribute("boardList", boardList);

View 에서 데이터 출력하기

이제 뷰에서 화면에 데이터를 뿌려주는 일만 남았습니다.

이번에도 역시 차례대로 접근을 해봅니다.

• 리스트를 있는 그대로 일단 뿌려준다. 
  
  

• 리스트의 각 데이터를 출력할때 체크리스트에 대해서는 반복문을 이용해 배열을 출력해 준다.

그럼 실제로 코딩을 해보겠습니다.

일단 보통의 리스트는 아래와 같이 하면 리스트가 출력이 되겠죠

<c:forEach items="${boardList}" var="item">

제목 : ${item.title}

내용 : ${item.content}

체크값 : ${item.checkValue}

</c:forEach>

그런데 이렇게 하면 체크값을 개별 처리 할 수 없습니다.

배열로 받아온 체크값들을 다시 한 번 for 문으로 처리를 해줍니다.

<c:forEach items="${item.checkValue}" var="value">

${value}

</c:forEach>

이렇게 하면 목록에 체크값들을 개별적으로 출력할 수 있습니다.

이렇게 개별적으로 체크값을 출력 하면, 그 값을 이용해 특정 이미지를 불러올 수 있도록 할 수도 있습니다.

<c:if test="$checkValue eq 'V'}> <img src="해당 아이콘"></c:if>

이런 식으로 말이지요

위의 코드들을 모두 한 번에 정리하면 아래와 같습니다.

<c:forEach items="${boardList}" var="item">

제목 : ${item.title}

내용 : ${item.content}

체크값 : 

<c:forEach items="${item.checkValue}" var="value">

<c:if test="$checkValue eq 'V'}> <img src="해당 아이콘"></c:if>

</c:forEach>

</c:forEach>

응용은 여러분의 몫입니다.

물론 제가 생각한 이 방식이 최고일리 없다고 생각합니다.

더 나은 방법을 알려주시면 감사히 받도록 하겠습니다.

※ 포스팅 내용중에 설명이 잘못 되었거나, 보완이 필요한 부분이 있으면 지적해 주세요~