JqGrid


안녕하세요. 명월입니다.
이번에는 Jquery를 이용한 grid를 사용해 보도록 하겠습니다.
실제 우리가 웹을 통해 도표적인 수식 값등을 나타낼 때는 table 태그를 사용해서 표를 작성해서 나타내는 것이 보편적이고 가장 많이 하는 형태입니다.
Grid의 경우는 의외로 모듈이 무겁고 설정하기 까다롭기 때문에 실제로는 많이 사용하지는 않습니다. 그러나 그런만큼 장점 또한 분명히 있기 때문에 정말 필요하다 싶을 때 사용하면 되겠습니다.

먼저 Grid의 장점이라고 하면 제일 먼저 소트기능입니다. 물론 테이블 내에서도 우리가 소트 기능을 만들 수 없는 것은 아니지만 꽤 많은 시간을 할애해서 만들어야 하기 때문에 간단한 테이블에서는 만들기가 꺼려지는 것입니다. 그럴 때 그리드를 가져와서 사용하면 편하겠습니다.

먼저 grid를 다운 받기 위해서 아래의 사이트에 접속을 합니다.

모듈 다운로드 - 링크
모듈 예제 - 링크
먼저 다운로드를 하고 이클립스에 설치해 보도록 하겠습니다

jquery jqgrid


위 이미지를 보면 다운로드 하는 파일이 버전 별로 있는데 우리는 가장 최신 버전을 다운 받아서 적용해 보겠습니다.

jquery jqgrid


그리고 웹이 적용되는 폴더에 위와 같이 복사해서 넣겠습니다.
예제에 나와있는 소스를 하나 참고 해서 작성해 보도록 하겠습니다.

jquery jqgrid


결과 화면입니다.

jquery jqgrid


결과 화면을 보니 grid 형식에 데이터가 입력이 되어 출력이 되었습니다.
그 상태에서 타이틀을 클릭을 해보면 오름차순, 내림차순의 형태로 정렬이 되는 모습을 확인 할 수 있습니다.

jquery jqgrid


그 외에 json, Xml을 이용하는 방법도 연습문제에 나와있습니다. 그리고 페이징 기능도 있고 검색 기능도 있습니다. 등등의 여러 기능이 있으니 각자 연습문제를 확인해 가면서 연습을 해 보도록 하겠습니다.

jquery jqgrid


여기까지 그리드에 대한 설명이었습니다.

그리드는 실제 개발에서는 그렇게 크게 사용되는 라이브러리는 아닙니다. 간단하게 게시판을 만든다고 할 때 그리드는 역시나 하나의 라이브러리이기 때문에 꽤 무겁습니다. 그리고 게시판의 형태는 소트기능을 필요로 하지 않기 때문에 의미가 그냥 테이블로 만드는 것이 더 간단하겠습니다. 그러나 다음 장에 나오는 Jqplot(그래프 라이브러리)와 결합하여 통계치 나타내는 도표를 만들거나 수치나 통계를 나타내는 장표를 만들 때는 소트기능이 있기 때문에 일반 테이블 보다는 더 나을 것 같군요.

그러기 때문에 이런 라이브러리가 있다라고 알아두는 것이 좋겠습니다.