jqGrid 튜토리얼

[jqGrid 튜토리얼]
#1. 설치하기

이클립스만 깔려있다는 가정 하에 아무 것도 없이 처음부터 시작을 해 본다.

우선 jqGrid를 설치하기 위해서 다음 스텝을 따라하자.

<참고> : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:how_to_install

step 1. 이클립스 빈 프로젝트(dynamic web project)를 하나 생성한다.

step 2. js 와 css 폴더를 만든다.

step 3. jqGrid 압축 파일을 다운로드 받는다.

주소 : http://www.trirand.com/blog/?page_id=6

압축을 풀어 js 는 js 폴더에, css는 css 폴더에 집어 넣는다.

step 4. jqGrid 테마 파일을 다운로드 받는다.

http://jqueryui.com/themeroller/

이놈 참 잘되어 있는게 내가 원하는 테마를 즉석에서 만들 수 있다.

테마가 즉석에서 눈에 보이므로 세팅도 정말 편하다.

세팅을 마쳤으면 다운로드 클릭하여 테마를 다운 받자!

테마 파일을 다운 받았으면

이 zip 파일 안에 다음과 비슷한 이름을 가진 css 파일이 있을 것이다.

jquery-ui-1.10.0.custom.min.css

( jqGrid에서 min 이 붙은건 압축된 버젼이라고 생각하면 된다. 개발자용으로 살살 디버깅도 하고 싶으면 min 이 없는 걸 사용하면 된다.)

그 파일을 css 폴더 안에 집어 넣자.

아. 그리고 images 폴더도 하나 더 만들어서 images 안의 파일도 집어 넣자.

이 작업을 모두 마치면 다음과 같은 폴더 구조가 될것임.

step 5. HTML 에 적용 시키기

자 그럼 jqGrid는 모두 설치가 완료 되었다.

자 이제 테스트 용 html 파일을 하나 생성 해 보자

MyFirstGrid.html

css 파일과 js파일을 인클루드 하자 ( 순서가 되게되게 중요하다! )

서버 프로그램 까지 짜는건 좀 귀찮으니까 다음에서 제공하는 소셜픽 API

( http://dna.daum.net/apis/socialpick )

에 간단하게 json 을 리턴해 주는 놈이 있으니 이놈을 활용해서 그리드를 만들어 보자.

jqGrid 기본 폼은 다음과 같다.

html 코드에는 빈껍데기 table 을 지정하고

jqGrid 함수를 이용하여 그 테이블에 그리드를 그려준다.

여기에 쓰이는 옵션들은 다음 회에서 자세히 알아보도록 하고

지금은 간단한 옵션들만 가지고 소셜픽 API 데이터를 뿌려보겠다.

왠만하면 CSS를 잘 먹어주는 최신 크롬 브라우저를 사용 하도록 하자.

뭐가 그려지긴 했는데 데이터가 안넘어 온다.

이럴땐 묻지도 따지지도 말고 F12 디버깅을 해보자!!

요청은 잘 날라 갔는데 값을 못받아 온다.

오류 메시지를 보기 위해 console 창을 열어보자.

xxx is not allowed by Access-Control-Allow-Origin.

json 으로 외부에 요청을 보내면

보안정책에 위배되어 요청이 나가질 않는다.

따라서 datatype을 jsonp로 변경하고 보내야 한다.

jsonp 에 대한 자세한 설명은 링크 참조.

http://stackoverflow.com/questions/9310112/why-am-i-seeing-an-origin-is-not-allowed-by-access-control-allow-origin-error

소스를 살짝 고쳐보자. datatype 을 json 이 아닌 jsonp 로 변경 하자

그런 후 테스트

오케이 일단은 데이터는 받아온다.

그렇지만 아직도 그리드가 완벽하게 그려지지 않는다.

소셜픽에서 받은 data 를 분석해 보자!!

jqGrid 에서 default 형태의 JSON 이 아닌 소셜픽만의 고유의 json 형태로 날라왔다.

소셜픽의 API 를 바꿀 순 없으니, jqGrid 에서 json 을 customizing 해야 겠지??

걱정하지 마라.

json을 customizing 하기 위해서 jsonReader 라는 놈이 있응께롱!

jsonReader 의 root값을 list 가 들어있는 값으로 지정 해 주고,

페이지는 페이징에 쓰이는 값이므로 일단은 1로 지정

total 도 1로 지정

records 는 record의 수를 지정하는 변수로 list 변수의 length 를 지정

이런식으로 하면 내가 설정한 저 방식대로 json 을 읽어들이게 된다.

그리하여 소셜픽에서 받은 json 을 jqGrid로 뿌리기 완성!!

다음 회에서는 jqGrid 의 각종 옵션들에 대해서 알아 보자!