[jqGrid] 기본 사용법 (ft. 기본 설정)

- jqGrid 기본 사용법 -

jqGrid를 표시하는 정도의 기본 사용법에 대해 알아보자.

우선 사용하기에 앞서 jqGrid를 다운로드하고 .js와 .css를 잡아주어야한다.

https://mine-it-record.tistory.com/283

[JavaScript] jqGrid 사용하기 1 - 플러그인 다운로드 및 환경 설정

- JqGrid 플러그인 다운로드 및 설정 - jqGird는 데이터를 그리드 형식으로 보여주는 jQuery 플러그인 이다. 이번에 처음으로 접하게 되었는데 확실히 다양한 기능들을 제공해 주어 생각보다 편리한

mine-it-record.tistory.com

1. dom 영역 설정

body영역에서 jqGrid를 표출할 영역을 설정해주어야한다.

<body>
  <div class="tableWrap">
    <table id="mainGrid"></table>
    <div id="pager"></div>    
  </div>
</body>

2. jqGrid 설정

jqGrid를 설정해줄때 colNames와 colModel을 꼭 설정해주도록 하자.

추가 옵션에 따라서 colNames는 생략이 가능하기는 하지만,

우선 기본적인 사용법에 대해 설명하고자 하는 글이니 알아두고 넘어가자.

var searchResultColNames =  ['게시글관리번호', '번호', '제목', '작성자', '날짜', '조회수'];
var searchResultColModel =  [
                  {name:'bbsMgtNo',  index:'bbsMgtNo',  align:'center', hidden:true},
                  {name:'bbsNum',    index:'bbsNum',    align:'left',   width:'12%'},
                  {name:'bbsTitle',  index:'bbsTitle',  align:'center', width:'50%'},
                  {name:'bbsWriter', index:'bbsWriter', align:'center', width:'14%'},
                  {name:'bbsDate',   index:'bbsDate',   align:'center', width:'12%'},
                  {name:'bbsHit',    index:'bbsHit',    align:'center', width:'12%'}
                ];

$(function() {
  $("#mainGrid").jqGrid({
    height: 261,
    width: 1019,
    colNames: searchResultColNames,
    colModel: searchResultColModel,
    rowNum : 10,
    pager: "pager" 
  });
});

이런식으로 선언을 해두어도 데이터가 없기 때문에 빈 jqGrid 화면이 나오게 된다.

이제 구현하고자 하는 곳의 성격에 따라 메서드에 넣어놓고 사용하거나 하면 된다.

function searchData(mode) {

  var postData = objConvertJson($("#fieldSurvForm")); //form 데이터 json으로 변경

  $("#mainGrid").jqGrid({
    url : "/board/searchData.do",
    datatype : "JSON",
    postData : postData,
    mtype : "POST",
    colNames: searchResultColNames,
    colModel: searchResultColModel,
    rowNum : 10,
    pager: "#pager",
    height: 261,
    width: 1019,
    caption : "게시글 목록"
  });
}

위 코드에서 사용한 objConverJson은 그냥 form 데이터를 json으로 파싱하는 메서드를 따로 설정해둔것이기 때문에 상황에 맞게 데이터를 전송해주면된다.

▷옵션 설명

url : ajax 처럼 데이터를 주고받을 서버 url 주소이다.
datatype : 말 그대로 데이터의 타입이다. ajax처럼 사용하면 된다. (local 타입도 존재)
postData : 넘겨줄 데이터이다.
mtype : POST or GET
colNames : 그리드 헤더의 제목 배열이며 ( colModel 과 개수가 꼭 맞아야한다. )
colModel : 그리드 행에 보여줄 데이터로 꼭 데이터 컬럼과 매칭을 시켜줘야 한다. (colNames 의 개수와 맞아야한다.)
rowNum : 보여줄 행의 개수
pager : 페이징을 하기 위해 선언해두며 거의 필수라 보면 된다.
height , width : 높이 , 넓이
caption : 타이틀 , 제목