'jqgrid'에 해당되는 글 1건

  1. 2013.02.04 [국내에서 가장 쉬운 jqGrid 튜토리얼] #1.설치하기 (6)

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 의 각종 옵션들에 대해서 알아 보자!


[국내에서 가장 쉬운 jqGrid 튜토리얼] #1.설치하기

- 끝! -


'IT > jqGrid' 카테고리의 다른 글

[국내에서 가장 쉬운 jqGrid 튜토리얼] #1.설치하기  (6) 2013.02.04
Posted by JHoon Jung

댓글을 달아 주세요

  1. Jay 2013.05.30 19:43 신고 Address Modify/Delete Reply

    정말 쉽게 잘 설명해주셨네요 감사합니다 ~!!

  2. 사악미소 2013.08.08 18:06 신고 Address Modify/Delete Reply

    감사합니다.
    덕분에 손쉽게 설정하고.
    이것저것 테스트 해볼 수 있었습니다.

  3. 알칸펠 2014.09.04 14:41 신고 Address Modify/Delete Reply

    이런건 추천해줘야
    커스텀 테마 자동생성으로 다운로드 받는 것까지도 완전 좋네요 ㅎㅎ

  4. 프로그래밍여치 2014.11.11 13:33 신고 Address Modify/Delete Reply

    감사합니다 정말좋은 블로그네요 ㅎㅎ제블로그에 링크좀가져가겠습니다^^

  5. yeon 2014.11.28 16:35 신고 Address Modify/Delete Reply

    테마를 다운 받으면..jquery-ui-1.10.0.custom.min.css와 비슷한 파일이 있을거라고 하셨는데 jquery-ui.structure.css 라는 파일의 이름이 다른데요...
    그래서 그런지 그리드가 화면에 생기지조차 않습니다... ㅠㅠ
    말씀하신대로 똑같이 따라햇구요...

  6. swconsulting 2018.02.03 10:43 신고 Address Modify/Delete Reply

    좋은 내용 잘보았습니다. 감사합니다.