Jinnie

Jinnie

Backend Developer

jqGrid 사용법 정리

1 분 소요

JqGrid

이번 프로젝트에서는 모든 테이블과 그리드 형식을 jqGrid로 처리한다.
처음 사용해보았지만 편리해서 정리하는 jqGrid 기본 기능

1. jqGrid 란

  • jQuery 라이브러리를 이용한 그리드 플러그인
  • 웹에서 테이블 형식의 데이터를 표시하고 조작을 위한 Ajax기반 자바스크립트 컨트롤러

2. Option

  • url : 데이터를 가지고 올 수 있는 주소를 입력
  • mtype : 요청방식 설정. GET/POST
  • dataType : 가지고 오는 데이터의 타입을 설정(xml, json, local)
  • collNames : 그리드 각각의 컬럼에 출력되는 이름 (배열)
  • colModel : 각 컬럼에 대한 상세 정보. 서버로부터 받아온 데이터를 매핑해서 출력
  • jsonReader/xmlReader : 데이터 타입이 json/xml일 경우 reader를 통해서 데이터를 어떻게 읽어드릴지 설정
  • rowNum : 초기에 출력할 데이터의 개수를 설정
  • pager : 페이지 설정
  • multiselect : row 마다 selectbox 생성
  • postData : 서버에 파라미터로 넘길 데이터 설정

3. colModel Option

colModel - “name”의 value값을 변수명과 일치시켜 주면 자동으로 데이터 매핑

  • name : 출력할 데이터의 이름. 서버에서 받은 데이터의 변수명을 명시
  • index : 컬럼 정렬시 서버에 넘어가는 값
  • width : 컬럼의 넓이 설정
  • align : 컬럼 내 데이터의 정렬 설정
  • hidden : 데이터 값은 설정하고 화면에서 보이고 싶지 않을 때 사용
  • formatter : 데이터로 들어오는 값을 특정 형식으로 변환해서 보여줄 때 사용

4. Event

그리드에 이벤트를 부여

  • afterInsertRow(rowId,rowData,rowElement) : 각 줄이 삽입된 후 일어나는 이벤트
  • beforeRequest() : 서버로 데이터를 요청하기 전에 이루어지는 이벤트
  • gridComplete() : 그리드의 모든 작업이 이루어진 후에 발생하는 이벤트
  • loadComplete(data) : 서버에 요청을 보낸 직후 호출하는 이벤트. data는 Ajax 호출 후 받아오는 데이터
  • loadError(xhr,status,error) : 서버에 보낸 요청이 실패했을 때 발생하는 이벤트
  • onCellSelect(RowId,indexColumn,cellContent,eventObject) : 그리드 셀을 선택하였을 때 발생하는 이벤트. 선택한 컬럼의 정보와 셀의 정보 반환 가능
  • ondbClickRow(rowId,indexColumn,cellName,cellContent) : 그리드 셀을 더블클릭 하였을 때 발생하는 이벤트. 선택한 컬럼의 정보와 셀의 정보 반환 가능
  • onSelectRow(rowId,status,eventObject) : 그리드의 행을 선택하였을 때 발생하는 이벤트. 옵션중 multiselect로 인해서 체크박스가 활성화 되었을 때, 체크박스의 상태도 반환 가능
  • onSortCol(index,indexColumn,sortOrder) : 정렬하기 전에(컬럼 헤더를 클릭 후)발생하는 이벤트

5. 예시

  • grid 생성해주는 부분 jqGrid1

  • Ajax로 데이터 요청하여 받는 부분 jqGrid2

  • 실제 그리드를 표시할 부분
    jqGrid3

참고