안녕하세요. 명월입니다.
이번에는 Jquery를 이용한 grid를 사용해 보도록 하겠습니다.
실제 우리가 웹을 통해 도표적인 수식 값등을 나타낼 때는 table 태그를 사용해서 표를 작성해서 나타내는 것이 보편적이고 가장 많이 하는 형태입니다.
Grid의 경우는 의외로 모듈이 무겁고 설정하기 까다롭기 때문에 실제로는 많이 사용하지는 않습니다. 그러나 그런만큼 장점 또한 분명히 있기 때문에 정말 필요하다 싶을 때 사용하면 되겠습니다.
먼저 Grid의 장점이라고 하면 제일 먼저 소트기능입니다. 물론 테이블 내에서도 우리가 소트 기능을 만들 수 없는 것은 아니지만 꽤 많은 시간을 할애해서 만들어야 하기 때문에 간단한 테이블에서는 만들기가 꺼려지는 것입니다. 그럴 때 그리드를 가져와서 사용하면 편하겠습니다.
먼저 grid를 다운 받기 위해서 아래의 사이트에 접속을 합니다.
모듈 다운로드 - 링크
모듈 예제 - 링크
먼저 다운로드를 하고 이클립스에 설치해 보도록 하겠습니다
위 이미지를 보면 다운로드 하는 파일이 버전 별로 있는데 우리는 가장 최신 버전을 다운 받아서 적용해 보겠습니다.
그리고 웹이 적용되는 폴더에 위와 같이 복사해서 넣겠습니다.
예제에 나와있는 소스를 하나 참고 해서 작성해 보도록 하겠습니다.
결과 화면입니다.
결과 화면을 보니 grid 형식에 데이터가 입력이 되어 출력이 되었습니다.
그 상태에서 타이틀을 클릭을 해보면 오름차순, 내림차순의 형태로 정렬이 되는 모습을 확인 할 수 있습니다.
그 외에 json, Xml을 이용하는 방법도 연습문제에 나와있습니다. 그리고 페이징 기능도 있고 검색 기능도 있습니다. 등등의 여러 기능이 있으니 각자 연습문제를 확인해 가면서 연습을 해 보도록 하겠습니다.
여기까지 그리드에 대한 설명이었습니다.
그리드는 실제 개발에서는 그렇게 크게 사용되는 라이브러리는 아닙니다. 간단하게 게시판을 만든다고 할 때 그리드는 역시나 하나의 라이브러리이기 때문에 꽤 무겁습니다. 그리고 게시판의 형태는 소트기능을 필요로 하지 않기 때문에 의미가 그냥 테이블로 만드는 것이 더 간단하겠습니다. 그러나 다음 장에 나오는 Jqplot(그래프 라이브러리)와 결합하여 통계치 나타내는 도표를 만들거나 수치나 통계를 나타내는 장표를 만들 때는 소트기능이 있기 때문에 일반 테이블 보다는 더 나을 것 같군요.
그러기 때문에 이런 라이브러리가 있다라고 알아두는 것이 좋겠습니다.
이번에는 Jquery를 이용한 grid를 사용해 보도록 하겠습니다.
실제 우리가 웹을 통해 도표적인 수식 값등을 나타낼 때는 table 태그를 사용해서 표를 작성해서 나타내는 것이 보편적이고 가장 많이 하는 형태입니다.
Grid의 경우는 의외로 모듈이 무겁고 설정하기 까다롭기 때문에 실제로는 많이 사용하지는 않습니다. 그러나 그런만큼 장점 또한 분명히 있기 때문에 정말 필요하다 싶을 때 사용하면 되겠습니다.
먼저 Grid의 장점이라고 하면 제일 먼저 소트기능입니다. 물론 테이블 내에서도 우리가 소트 기능을 만들 수 없는 것은 아니지만 꽤 많은 시간을 할애해서 만들어야 하기 때문에 간단한 테이블에서는 만들기가 꺼려지는 것입니다. 그럴 때 그리드를 가져와서 사용하면 편하겠습니다.
먼저 grid를 다운 받기 위해서 아래의 사이트에 접속을 합니다.
모듈 다운로드 - 링크
모듈 예제 - 링크
먼저 다운로드를 하고 이클립스에 설치해 보도록 하겠습니다
위 이미지를 보면 다운로드 하는 파일이 버전 별로 있는데 우리는 가장 최신 버전을 다운 받아서 적용해 보겠습니다.
그리고 웹이 적용되는 폴더에 위와 같이 복사해서 넣겠습니다.
예제에 나와있는 소스를 하나 참고 해서 작성해 보도록 하겠습니다.
결과 화면입니다.
결과 화면을 보니 grid 형식에 데이터가 입력이 되어 출력이 되었습니다.
그 상태에서 타이틀을 클릭을 해보면 오름차순, 내림차순의 형태로 정렬이 되는 모습을 확인 할 수 있습니다.
그 외에 json, Xml을 이용하는 방법도 연습문제에 나와있습니다. 그리고 페이징 기능도 있고 검색 기능도 있습니다. 등등의 여러 기능이 있으니 각자 연습문제를 확인해 가면서 연습을 해 보도록 하겠습니다.
여기까지 그리드에 대한 설명이었습니다.
그리드는 실제 개발에서는 그렇게 크게 사용되는 라이브러리는 아닙니다. 간단하게 게시판을 만든다고 할 때 그리드는 역시나 하나의 라이브러리이기 때문에 꽤 무겁습니다. 그리고 게시판의 형태는 소트기능을 필요로 하지 않기 때문에 의미가 그냥 테이블로 만드는 것이 더 간단하겠습니다. 그러나 다음 장에 나오는 Jqplot(그래프 라이브러리)와 결합하여 통계치 나타내는 도표를 만들거나 수치나 통계를 나타내는 장표를 만들 때는 소트기능이 있기 때문에 일반 테이블 보다는 더 나을 것 같군요.
그러기 때문에 이런 라이브러리가 있다라고 알아두는 것이 좋겠습니다.
'Open source > Javascript, Jquery, CSS' 카테고리의 다른 글
[Javascript] Select2 (Select searching, multiselect, ajax) (0) | 2019.08.27 |
---|---|
[Javascript] 날짜 포맷 설정하는 방법(moment 라이브러리) (0) | 2019.08.22 |
[Javascript] 알람 메시지 라이브러리(toastr 라이브러리) (0) | 2019.08.21 |
Google OAuth 사용법 (0) | 2019.06.18 |
[CSS] 구글 폰트 (Google font) 이용하기 (0) | 2019.05.31 |
Jquery Mobile (0) | 2015.07.13 |
Jquery UI (0) | 2015.07.12 |
그래프 오픈 라이브러리 - JqPlot (2) | 2012.09.16 |