-
jqGrid 위키문서 정리 - 플러그인 특징 및 설치개발/Javascript & jQuery 2018. 4. 23. 11:39
준비 중인 프로젝트에서 jqGrid를 사용하는데 내가 유일한 초기 투입 개발자니까 미리 준비하면 좋겠다고 하셔서 공부를 시작했다.
요기에 정리되어 있는 공식문서를 공부할 겸 따로 정리해본당 → http://www.trirand.com/jqgridwiki/doku.php?id=wiki:features
1. 특징
1) 기본 그리드
• UI테마에 기초한 CSS 사용 : jQueryUI의 테마를 활용하여 그리드를 표현
→ jQueryUI 테마 다운로드 필요
• 페이징 : 페이징 기능을 사용하여 데이터 출력 가능하며, 한 페이지에 총 몇 행을 출력할지는 개발자가 지정할 수 있음
• 사용자가 컬럼 너비 조정 가능
• 데이터 정렬 : 사용자가 헤더를 클릭하여 데이터 정렬 가능. 개발자가 특정 타입을 기준으로 데이터 정렬하도록 지정 가능
• 이벤트 핸들러 & 유저 API : 다양한 이벤트 핸들러와 메소드 제공
• 스크롤 시 자동 데이터 로딩 : 페이징 기능 없이 수직 스크롤바만을 써서 데이터 로딩 가능
• 로컬 데이터 사용 가능 : Array로 정의한 로컬 데이터 역시 jqGrid로 출력 가능
• ASP, .net, PHP, perl 등의 서버측 솔루션 없이 자연스러운 통합 가능
• 크로스 브라우저 지원 (IE 6.0+, 파이어폭스 2.0+, 사파리 3.0+, 오페라 9.2+, 크롬)
• 다국어 지원(i18n) : 20개국어 이상 지원
• XML, JSON, Array 및 사용자 정의 데이터 타입을 데이터 소스로 사용 가능
• 서브 그리드 출력 기능 지원
2) Formatting
• Formatter를 이용하여 셀에 출력되는 컨텐츠의 표시 형식 지정 가능
• Formatter에 사전정의된 형식 : 정수, 실수, 날짜, 통화, 링크, 체크박스 등
• 개발자가 직접 커스터마이징한 표시형식 사용 가능
• 다국어 지원
3) Inline editing
• 특정 행에 위치한 셀의 내용 편집 가능
• Text, text area, 체크박스, 셀렉트 박스, 이미지, 버튼 타입 지원 가능
• 클라이언트 측에서 입력 데이터의 validation 가능
4) Cell editing
• 각각의 셀 단위로 편집 가능
• Text, text area, 체크박스, 셀렉트 박스, 이미지, 버튼 타입 지원 가능
• 클라이언트 측에서 입력 데이터의 validation 가능
• Tab키, shift tab 키, 오른쪽·왼쪽·위·아래 방향키를 사용하여 셀 간 이동
• 유연한 이벤트 처리
5) Form editing
• 각각의 셀 단위로 편집 가능
• Text, text area, 체크박스, 셀렉트 박스, 이미지, 버튼 타입 지원 가능
• 클라이언트 측에서 입력 데이터의 validation 가능
• 위·아래 방향키를 사용하여 셀 간 이동
• 유연한 이벤트 처리
• 폼 생성부터 종료까지 전반적으로 컨트롤 가능
6) 검색 및 필터링
• 그리드 내 컬럼을 데이터 검색에 활용할 수 있음
• 검색필드는 그리드 상단 또는 하단 혹은 그리드 내부에 삽입 가능
• 싱글 필드 검색 가능
• 툴바를 활용한 검색(헤더 하단에 검색필드 삽입 가능)
• Complex form 검색
• 사용자 정의 기준을 활용한 고급검색 가능
7) 트리 그리드 (계층형 그리드)
• Nested set 모델 및 Adjacency 모델 지원
• Easy configuration
• 트리 노드 자동 로딩
• 손쉬운 활용을 위해 다양한 API 제공
8) Import / Export
• 전체 그리드 configuration을 다른 파일 형식으로 import / export 가능
• Xml, json, xmlstring, jsonstring 형태 지원
• Configuration 및 데이터를 한번에 import 가능
2. Documentation
1) jqGrid 설치
(1) 설치환경 요구사항
- 모던 웹 브라우저 (파이어폭스, 사파리, 크롬, 오페라, IE) 필요
※ jQuery 라이브러리가 지원하는 브라우저라면 어떤 것이든 jqGrid 사용 가능
- jQuery 1.3 이상 : http://www.jquery.com
- jQuery UI theme : http://jqueryui.com/themeroller/
- jqGrid 플러그인 : http://www.trirand.com/blog/?page_id=6
로컬 데이터만을 활용하여 그리드 출력 시에는 array 형태, xml 데이터 파일 또는 JSON 파일이 필요하나, jqGrid의 주요 목적이 웹을 통해 동적으로 데이터를 활용하고자 함이므로 서버 통신을 위해서는 아래와 같이 준비해야 함
- 웹서버 : IIS, Apache, Tomcat 등
- 데이터베이스 : MySQL, PostgreSQL, Oracle, MSSQL 등
- 서버 측 스크립트 언어 : PHP, ASP 등
(2) jqGrid 다운로드
- 다운로드 빌더 (http://www.trirand.com/blog/?page_id=6) 에서 jqGrid 중 필요한 component만 선택하여 다운로드 가능
(3) 기본 설치
① jqGrid 압축파일과 jQuery UI Theme 압축파일의 압축을 해제
② jqGrid를 설치할 프로젝트 폴더 내에 js 폴더와 css 폴더를 생성
③ 다운로드한 jqGrid 패키지 중 css 폴더 내의 ui-jqgrid.css 파일을 새로 생성한 css 폴더로 카피
④ jqGrid 패키지 중 js 폴더 안에 있는 모든 파일을 새로 생성한 js 폴더로 카피
⑤ 다운로드한 jQuery UI Theme 패키지의 모든 파일을 새로 생성한 css 폴더로 카피
⑥ html 파일에 css 파일 및 js 파일 import 선언
⇒ 최종 폴더 구조
⇒ html 파일 헤더 구조
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid Test Project</title>
<link rel="stylesheet" type="text/css" media="screen" href="../gridTest/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../gridTest/css/ui.jqgrid.css" />
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="../gridTest/js/i18n/grid.locale-kr.js" type="text/javascript"></script>
<script src="../gridTest/js/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
◈ grid.locale-kr.js 파일을 jqGrid.js 파일보다 먼저 선언해야 함
◈ jQuery UI Theme 이 제각기 다른 폰트 사이즈를 가지고 있으므로 스타일 태그를 추가하여 폰트 사이즈를 통일하고 시작하는 것을 권장함
⇒ 최종 헤더 파일 구조
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid Test Project</title>
<link rel="stylesheet" type="text/css" media="screen" href="../gridTest/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../gridTest/css/ui.jqgrid.css" />
<style>
html, body {
margin : 0;
padding : 0;
font-size : 75%;
}
</style>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="../gridTest/js/i18n/grid.locale-kr.js" type="text/javascript"></script>
<script src="../gridTest/js/jquery.jqGrid.js" type="text/javascript"></script>
</head>
이렇게 하면 세팅은 끝!
'개발 > Javascript & jQuery' 카테고리의 다른 글
팝업창 하나만 띄우기 (0) 2019.02.14 [jqGrid] 그리드 내 행마다 수정/삭제 버튼 삽입하기 (0) 2019.01.24 달력 그리기 (0) 2018.02.22 데이터 정렬하기 (0) 2018.02.07 기본 로직을 활용하여 특별한 날 생성하기 (0) 2018.02.06 댓글
