[Spring] ★★★ Spring + JQgrid 사용 하기(매우유용)
2013. 11. 14. 20:15ㆍ개발관련기록/Spring
반응형
2시간 만에 해결했다.
나름 선방한건가??
참고 : "Spring Hello World 찍기 이어서 작업한 내용임."
Jqgrid 의 css, js 등등 설정
Jquery 의 css와 images 들을 setting
참고 자료 : http://ihayatesw.tistory.com/288
위의 참고 자료는 Spring Setting과는 차이가 존재 한다.
Spring 구조에 맞게 Css, js, images의 폴더를 정했다.
되도록이면 구조를 최대한 잘 볼 수 있도록 화면을 캡쳐 한다.
각종 css 버전들은 이쁜골로 골라서 알아서 적용가능하니 참고 바란다.
앞으로 할 일은 json 데이터 형식으로 데이터를 받아 출력하는 부분을 진행해 보도록 하겠다.
MyFirstGrid.jsp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel = "stylesheet" type = "text/css" media = "screen" href = "resources/css/jquery-ui-1.10.3.custom.min.css"/> <link rel = "stylesheet" type = "text/css" media = "screen" href = "resources/css/ui.jqgrid.css"/> <script src = "resources/js/jquery-1.9.0.min.js" type = "text/javascript"></script> <script src = "resources/js/i18n/grid.locale-kr.js" type = "text/javascript"></script> <script src = "resources/js/jquery.jqGrid.min.js" type = "text/javascript"></script> <script> $(window.document).ready(function() { $("#grid").jqGrid({ url : 'http://apis.daum.net/socialpick/search?output=json', caption : 'Daum SNS Pic', // caption : 그리드의 제목을 지정한다. datatype : 'jsonp', // datatype : 데이터 타입을 지정한다. // (json 으로 외부에 요청을 보내면 보안정책에 위배되어 요청이 나가질 않는다. // 따라서 datatype 을 jsonp로 변경하고 보내야 한다.) mtype : 'get', // mtype : 데이터 전송방식을 지정한다. height : '500px', // height : 그리드의 높이를 지정한다. pager : '#pager', // pager : 도구 모임이 될 div 태그를 지정한다. rowNum : 3, // rowNum : 한 화면에 표시할 행 개수를 지정한다. loadonce : true, // loadonce : rowNum 설정을 사용하기 위해서 true로 지정한다. rowList : [3, 6, 9, 10], // rowList : rowNum을 선택할 수 있는 옵션을 지정한다. // colNames : 열의 이름을 지정한다. colNames : [ '순위', '소셜픽키워드', '이슈에 대한 링크 URL', '요약문', '검색수', '트윗수', '검색 결과의 페이지 번호', '순위 상승/하락수', '카테고리' ], colModel : [ { name : 'rank', index : 'rank', width : 40, align : 'center' }, { name : 'keyword', index : 'keyword', width : 100, align : 'left' }, { name : 'link', index : 'link', width : 100, align : 'left' }, { name : 'content', index : 'content', width : 200, align : 'left' }, { name : 'count', index : 'count', width : 100, align : 'center' }, { name : 'quotation_cnt', index : 'quotation_cnt', width : 100, align : 'center' }, { name : 'comment_cnt', index : 'comment_cnt', width : 100, align : 'center' }, { name : 'rank_diff', index : 'rank_diff', width : 100, align : 'center' }, { name : 'category', index : 'category', width : 100, align : 'center' } ], // jqGrid 에서 default 형태의 JSON 이 아닌 소셜픽만의 고유의 json 형태로 날아오기에. // 소셜픽의 API 를 바꿀 순 없어, jqGrid 에서 json을 // customizing하여 사용하기 위해 jsonReader를 사용했다. jsonReader : { repeatitems : false, id : "rank", root : function (obj) { return obj.socialpick.item; }, page : function (obj) { return 1; }, total : function (obj) { return 1; }, records : function (obj) {return obj.socialpick.item.length; } } // navGrid() 메서드는 검색 및 기타기능을 사용하기위해 사용된다. }).navGrid('#pager', { search : true, edit : true, add : true, del : true }); }); </script> <title>jqGrid</title> </head> <body> // jqGrid 플러그인을 사하기위한 table 태그와 div태그 사용 <table id = "grid"></table> <div id = "pager"></div> </body> </html> |
드디어 떴다.
위에서 잘못 설정한 것들이 있다.
다시 설정을 적용해 보니
resources 부분은 서블릿에 이미 등록이 되어 있고,
src/main/resources 에 css, js, image는 등록할 필요 조차 없었다.
관련 이미지 첨부 하여 다시 한다.
위의 내용은 모두 잊어 버릴 것!!
추가 : css 경로, js 경로는 설정한 Jquery, Jqgrid에 맞게 setting 한다.
(path 설정)
반응형
'개발관련기록 > Spring' 카테고리의 다른 글
| maven + spring + mybatis 설정 (0) | 2013.11.15 |
|---|---|
| Spring+iBatis+Maven 셋팅 및 연동 (0) | 2013.11.15 |
| [Spring]Hello World 찍어 보기 (0) | 2013.11.14 |
| [JAVA Spring]강의 (0) | 2013.07.18 |
| 스프링 강좌 3.0 (1부, 2부) (1) | 2012.08.30 |