본문 바로가기

jQuery/jqGrid

[jqGrid] JSP에서 jqGrid 설정하기

반응형
01. 이클립스에 Dynamic Web Project를 만든다.

     





02. PjtJQGridTest라는 이름으로 새롭게 프로젝트를 생성했다.






03. 생성된 프로젝트의 WebContent 폴더 아래에

    새로운 폴더  css와 js를 만듭니다.






04. 생성된 프로젝트의 WebContent 폴더 아래에

    새로운 폴더  css와 js를 만듭니다.






05. 아래 경로로 이동하여 페이지 아래에 있난 jqGrid 플러그인을 다운받는다.

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






06. 다운받은 jqGrid 플러그인 파일의 압축을 해제한다.






07. 다운받은 파일의 css폴더의 ui.jqgrid.css를

     PjtJQGridTest 프로젝트에 생성해둔 css폴더로 복사한다.







08. 다운받은 파일의 js폴더의 모든 파일들을

     PjtJQGridTest 프로젝트에 생성해둔 js폴더로 복사한다.







09. 아래 경로로 이동하여 페이지 아래에 있난 jQuery 플러그인을 다운받는다.

     URL : http://jqueryui.com/themeroller/







10. 다운받은 jQuery 플러그인 파일의 압축을 해제한다.







11. 다운받은 파일의 js폴더의 imges 폴더와, jquery-ui-1.10.3.custom.min.css 파일을

     PjtJQGridTest 프로젝트에 생성해둔 js폴더로 복사한다.







12. PjtJQGridTest의 WebContent 폴더에 MyFirstGrid.jsp 파일을 생성한다.






13. MyFirstGrid.jsp에 필요한 소스를 작성한다.


 MyFirstGrid.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<link rel = "stylesheet" type = "text/css" media = "screen" href = "css/jquery-ui-1.10.3.custom.min.css"/>
<link rel = "stylesheet" type = "text/css" media = "screen" href = "css/ui.jqgrid.css"/>

<script src = "js/jquery-1.9.0.min.js" type = "text/javascript"></script>
<script src = "js/i18n/grid.locale-kr.js" type = "text/javascript"></script>
<script src = "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>





14. 작성한 jsp를 톰캣등으로 실행하면 아래와 같은 화면이 나타난다.






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


PjtJQGridTest.zip


반응형