Translate

[jqGrid] 설치 및 기본셋팅(코드) 방법

날짜:







 jqGrid 무료 라이선스는 v4.7.1 까지이며 이후는 유료버전
 - 자세한 설명과 다운로드는 링크([jqGrid] 버전에 따른 유/무료 라이선스 정책) 참조


1004lucifer
실습 jqGrid 버전: CDN 제공하는 v4.6 버전으로 테스트



필수 라이브러리
 - jQuery (v1.3이상 권장하나 이하버전에서 특별한 문제는 없어보임.)
 - jQuery UI
 - Bootstrap


기본 코드는 아래와 같다.
1004lucifer
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

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

  <script src="jqGrid/jquery.js" type="text/javascript"></script>
  <script src="jqGrid/js/i18n/grid.locale-kr.js" type="text/javascript"></script>
  <script src="jqGrid/js/minified/jquery.jqGrid.min.js" type="text/javascript"></script>
  <script src="bootstrap/dist/js/bootstrap.js" type="text/javascript"></script>
</head>
<body>
  <table id="list"><tr><td></td></tr></table> 
  <div id="pager"></div> 
  <script>
    var dataArray = [
      {
        "name": "Lorene Battle",
        "phone": "(936) 574-3976"
      },
      {
        "name": "Wendi Downs",
        "phone": "(815) 510-3017"
      }
    ];

    $(document).ready(function() {
      $("#list").jqGrid({
        datatype: 'local',
        styleUI: 'Foundation',
        data: dataArray,
        colModel: [
          {name: 'name', label : 'Name'},
          {name: 'phone', label : 'Phone Number'}
        ],
        caption : 'Users Grid',
        height: 'auto',
        rowNum: 5,
        pager: '#pager'
      });
    });
  </script>
</body>
</html>




주의사항


 1. js 로딩 순서에 주의 (필수)
  - jquery => jqGrid_locale => jqGrid 순서로 로드가 되어야 한다.

 2. table 태그는 XHTML 1.0 Strict document를 만족하기 위해 tr, td 태그를 넣어준다. (필수X)

 3. table 태그의 id 속성은 그리드 기능을 이용하기 위한 필수 속성이다.





참고
 - http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid

댓글

댓글 쓰기