jstl로 bootstrap 아코디언 출력하기
4/18 개발일기
기껏 공지사항을 게시판 리스트 형 + 상세화면으로 만들어놓고 났더니 회사홈페이지 공지사항이 아코디언 형태다(OTL).. 미리미리 확인했어야 하는데T_T 그래서 아코디언 형태로 다시 만들었다. 다행히 부트스트랩에서 제공하는 js 예제 중 아코디언이 있어, 복+붙(ㅎㅎ)
아코디언 예제 링크
아코디언 화면을 구현할 때 최초 화면 로딩 시 첫번째 게시물은 펼쳐진 상태여야 하고 두번째 게시물부터는 닫혀진 상태여야 한다. 부트스트랩 js에서 온클릭 이벤트는 모두 지원해주지만, 요 부분은 내가 최초에 데이터 뿌릴 때 지정해줘야 하는 것이므로 jstl 로 구현해주었다.
그러니까 로직은 이렇다.
<c:foreach> 을 돌면서 데이터를 뿌릴 때, 첫번째 데이터면 class에 collapse in 을 추가한다.
그래서 <c:foreach> 태그 첫 단에 varStatus 를 아래 처럼 정의해주고,
<c:forEach items="${list }" var="row" varStatus="status">
컨텐츠가 뿌려져야 하는 div 클래스에는 이렇게 설정한다.
<div id="collapse${status.index}" class="${status.index eq 0 ? 'panel-collapse collapse in':'panel-collapse collapse'}" role="tabpanel" aria-labelledby="headingOne">
아는 사람은 알겠지만, ${boolean 식별 문장?값:값} <- 요 구문은, if(boolean 식별문장) A else B 와 동일하다. 즉 true면 앞의 값, false면 뒤의 값이 출력된다. ${boolean식별문장?true일때의값:false일때의값} 요렇게 출력된다고 보면 된다.
즉 위에 내가 작성한 코드는 status.index eq 0 앞서 정의한 status의 index가 0과 같으면 (eq) 'panel-collapse collapse in'를 출력하고, 그게 아니라면 'panel-collapse collapse' 을 출력하게 한 것이다.
그리고 이번에 배운 것 하나. CONTENT 영역에 ENTER값이 \r\n 으로 변환되어 들어가있어서, 출력할 때는 이를 <br/>로 바꾸어줘야 했었는데, 이건 jstl 영역에서 이렇게 쓸 수 있었다.
jsp 상단에 아래와 같이 선언해주고
<% pageContext.setAttribute("ENTER", "\r\n"); %>
출력할 곳에는 아래와 같이 써준다.
<c:out escapeXml="false" value="${fn:replace(row.CONTENT,ENTER,'<br>')}" />
escapeXml을 false로 설정하지 않으면 <br/>이 enter 태그로 먹지 않고 그냥 텍스트로 출력된다. \r\n 을 pageContext에 저렇게 입력하지 않고 fn:replace 안에 직접 넣으면 오류난다.
오류나는 문법
${fn:replace(row.CONTENT,'\r\n','<br>')}
완성된 아코디언 샘플:)
