jqGrid 사용법 정리
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 생성해주는 부분
-
Ajax로 데이터 요청하여 받는 부분
-
실제 그리드를 표시할 부분