Whiteship's Note


약간 어설픈.. OSAF 그리드 태그 완성

모하니?/Coding : 2008. 10. 17. 15:39


조금 어설픈 그리드 태그를 완성하고 공개합니다. 사실상 그리드 태그의 핵심 요소는 DisplayTag이고, 회사에서 사용한 OSAF 태그는 상용제품을 사용하고 있어서 공개할 수가 없었습니다. 그리드 구조도 조금 바껴서, 엑셀 기능을 제대로 활용할 수 없었습니다. ㅠ.ㅠ.. 이제 더이상 시간을 끌다가는 언제 공개할 수 있을지 몰라서, 일단 마일스톤 버전 공개를 목표로, 현 상태를 정리하여 공개하겠습니다.

<o:gridpage popupheight="400" popupwidth="700" >
<c:set var="startNumValue" value="${startNum}" />

    <d:table name="list" class="maingrid" id="maingrid">
        <d:column title="No">
            <a href="javascript:sendToUpdate(<c:out value="${maingrid.id}" />)">
                ${startNumValue}
            </a>
<c:set var="startNumValue" value="${startNumValue + 1}" />
        </d:column>
        <d:column property="name" title="이름" />
        <d:column property="loginId" title="아이디" />
        <d:column property="sex" title="성별" decorator="org.opensprout.sample.model.enumeration.SexType" />
        <d:column property="location" title="사는곳" />
        <d:column property="birthday" title="생일" />
        <d:column property="hobbies" title="취미" />
    </d:table>
</o:gridpage>

이런식으로 그리드 태그를 작성하면, 화면에서 다음과 같은 그리드를 만들어 줍니다. 약간 어설플이라고 한 이유는 많은데, 차차 개선해 나가기로 하겠습니다.


왼쪽에 [1/6]은 [첫번째 row 넘버/전체 갯수] 입니다. 따라서 두 번째 페이지에서는 [6/6]으로 보이겠죠.
중간에 있는 [1|2] 에서 굵은 글씨체가 현제 페이지고 2를 누르면 두 번째 페이지로 이동합니다.
오른쪽에 있는 건, 한 페이지당 목록의 갯수 입니다.

파이어폭스/인터넷 익스플로러/구글 크롬 에서 확인해봤을 때 모두 동일하게 보였습니다.
top

Write a comment.


그리드 태그 파일 으윽.. 머리야~

View/JSP : 2008. 9. 30. 10:24


사용자 삽입 이미지

현재 그리드에 스타일 적용과 데코레이터 사용법까지 확인을 했고, 뭘 해야 할지 잠시 정리해 봤습니다. 곰곰히..

1. 페이지 네비게이션 바 추가.(완료)
-> displaytag가 제공하는 네비게이션바도 있지만, 그건 이미 많은 양의 데이터를 세션에 집어넣고 그 중에서 페이징처리를 하는거기 때문에 별로입니다. 제대로 페이징을 하려면 서비스 단에서 제공하는 만큼의 데이터가 한 페이지 분량이 되고, 페이징 로직도 서비스단에서 제공하는 걸 이용해야 합니다.

2. id값을 히든 컬럼으로 추가.(완료)
-> 한 Row가 하나의 객체 정보를 보여주고 있고 그 중에 선택을 해서 삭제/수정 작업을 하려면 id를 물고 있어야합니다. 따라서 id 값은 테이블에 안 보이는 컬럼으로 추가되어 있어야합니다.

3. 순번 표시(완료)
-> id가 아닌, 컬럼 줄 수를 표시해야 합니다. 500개의 데이터 중에 해당 줄이 몇 번째 데이터에 해당하는지, 기본적으로 이 순서로 정렬해서 보여줄 필요가 있겠죠. 이 기능도 역시 서비스 단과 맞물려서 동작해야겠습니다. displaytag에서도 뭔가 제공해주겠지만, 그건 저 한 페이지 내용에 대한 순번일 뿐, 전체 데이터에 대한 순번은 서비스 단이 알고 있을테니 말이죠.

4. 정렬 기능(에러)
-> 각 컬럼 헤더에 정렬 단추를 달고, 해당 단추를 눌러서 정렬 할 수 있는 기능을 제공해야 합니다. 이 기능은 displaytag가 제공하기 때문에, 설정만 추가하면 됩니다.

5. 링크 기능
-> 어떤 줄을 더블클릭하면, 바로 수정 화면으로 이동하도록 설정하고 싶습니다. 이 기능은 displaytag가 제공하는 링크 기능을 이용하면 간단하게 될 듯 합니다.

6. 컬럼 데이터 포맷
-> 금액이나 날짜 데이터의 경우 포맷을 설정할 수 있는 기능을 displaytag가 제공합니다. 그 패턴을 좀 익혀서 정리해둬야 겠습니다.

7. 체크 박스
-> 그리드 맨 왼쪽에 체크 박스 컬럼을 만들어서 다중 선택을 지원합니다. 다중 선택으로 해당 객체의 id 값들의 배열을 특정 요청 매개변수로 넘겨줄 수 있다면, 그 뒤엔 여러가지 일들을 할 수 있겠죠.

이밖에도 그리드 편집/새로운 줄 추가 등 여러 기능이 있을 수 있겠지만.. 일단 저 위의 것들부터도 그닥 만만해 보이지 않습니다. 저것만 끝내면 OSAF 공개인데... ㅠ.ㅠ 파이팅 하자 파이팅 해..

updated today 6:00


top

  1. Favicon of http://ttuet.tistory.com BlogIcon 세가그못만 2008.09.30 14:52 PERM. MOD/DEL REPLY

    기선님, 화이팅!

    Favicon of http://whiteship.tistory.com BlogIcon 기선 2008.09.30 16:59 PERM MOD/DEL

    넵 파이팅!

Write a comment.