jqGrid 플러그인 다운로드 및 환경 설정
참고도서 및 사이트
|
jqGrid Wiki (http://www.trirand.com/jqgridwiki) |
jqGrid는 jQuery라이브러리를 이용한 Grid Plugin으로 웹에서 테이블 형식의 데이터를 표시하고 조작을 위한 Ajax 기반 자바스크립트 컨트롤러이다.
jqGrid는 기본적으로 jQuery-UI를 이용하기 때문에 원하는 테마를 만들어서 사용 가능하다.
jqGrid 다운로드
www.trirand.com/blog/?page_id=6
jQuery Grid Plugin – jqGrid » Downloads
Downloads
www.trirand.com
jqGrid API 문서 겸 데모 페이지
trirand.com/blog/jqgrid/jqgrid.html
jqGrid Demos
jqGrid 4.0 New search module, Tree Grid and SubGrid improvements, new colModel cellattr event and much more... Enjoy Please, support the jqGrid project by clicking on our sponsors ad!
trirand.com
제공 기능들이 여러 가지 있으며 샘플링으로 jqGrid의 데모와 소스를 제공한다.
화면을 보면서 필요한 샘플링을 응용해서 쓰도록 하자.
그리드를 사용하기 위해서는 먼저 라이브러리를 다운로드하여야 한다. (www.trirand.com/blog/?page_id=6 )
다운을 받은 후 사용 시 script 선언에서 주의할 점은 jqGrid는 jQuery 기반이기 때문에 꼭 jQuery를 맨 처음 선언하여 사용해야 한다.
|
1
2
3
4
5
6
|
<link rel="stylesheet" type="text/css" href="/plugin/grid/css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/plugin/grid/css/ui.jqgrid.css">
<script type="text/javascript" src="/js/common/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/js/grid/jquery/grid.locale-kr.js"></script>
<script type="text/javascript" src="/js/grid/jquery/jquery.jqGrid.min.js"></script>
|
cs |
. js 파일과. css를 잡아주었으니 화면상에 표현을 해보도록 하자.
우선 body부분에 표출할 영역을 설정한다.
|
1
2
3
4
5
6
7
8
|
<body>
<div class="table">
<table id="testGrid"></table>
<div id="pager"></div>
</div>
</body>
|
cs |
이벤트를 기준으로 값을 불러오고자 한다면 doument.ready 나 $(function(){})에 넣어 줘야 비어있는 게시글이 화면에 나올 것이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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() {
$("#testGrid").jqGrid({
height: 261,
width: 1019,
colNames: searchResultColNames,
colModel: searchResultColModel,
rowNum : 10,
pager: "pager"
});
});
|
cs |
Option
그리드를 그리기 위해서는 그리드를 그려줄 table이 필요하다.
선언한 테이블에 ID 값을 주고 스크립트에서는 그 ID 값에 그리드를 설정해주면 된다.
그리드를 그리기 위한 설정 시 기본 옵션들의 규칙은 “name : value”의 형태이다.
여기서 value 값은 단순한 값일 수도 있지만, 함수일 수도 있다.
그리고 특정 함수를 실행할 때 다시 불러오도록 설정을 해주면 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function searchData(mode) {
var postData = objConvertJson($("#fieldSurvForm")); //form 데이터 json으로 변경
$("#testGrid").jqGrid({
url : "/board/searchData.do",
datatype : "JSON",
postData : postData,
mtype : "POST",
colNames: searchResultColNames,
colModel: searchResultColModel,
rowNum : 10,
pager: "#pager",
height: 260,
width: 1020,
caption : "게시글 목록"
});
}
|
cs |
예시에서 사용한 objConvertJson라는 건 그냥 따로 파싱(parse)하는 함수를 선언해둔 것이기 때문에 직접 datatype과 마찬가지로 json으로 변경해줘야 한다.
- url : ajax처럼 데이터를 주고받을 서버 url 주소이다.
- datatype : 말 그대로 데이터의 타입이다. ajax처럼 사용하면 된다. (local 타입도 존재)
- postData : 넘겨줄 데이터이다.
- mtype : POST or GET
- colNames : 그리드 헤더의 제목 배열이며 ( colModel과 개수가 꼭 맞아야 한다. )
- colModel : 그리드 행에 보여줄 데이터로 꼭 데이터 칼럼과 매칭을 시켜줘야 한다. (colNames의 개수와 맞아야 한다.)
- rowNum : 보여줄 행의 개수
- pager : 페이징을 하기 위해 선언해두며 거의 필수라 보면 된다.
- height , width : 높이 , 넓이
- caption : 타이틀 , 제목
colModel Option
그리드의 옵션 중에서도 가장 중요한 옵션은 data와 직접 관련 있는 colModel이다.
그리드에서도 colModel만을 위한 옵션들을 제공하고 있다.
colModel의 기본적인 특징은 데이터를 매핑해준다는 것이다.
매핑이 이뤄지는 방식은 colModel 옵션 중 하나인 “name”을 이용하여 이뤄진다.
이때 “name”의 value값을 데이터의 변수명과 일치시켜주면 자동으로 매핑이 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
// jqGrid 예제
// jqGrid option, jqGrid colModel option 포함
<table id="grid"></table>
<div id="pager"></div>
<script type="text/javascript">
var $Grid = {};
$(document).ready(function(){
$Grid = $("#testGrid");
$Grid.jqGrid({
url : '../resources/server.json',
datatype : "json",
mtype : "get",
jsonReader : {
id : "id" // 대표 아이디를 설정
,root : "employee" // 데이터의 시작을 설정
},
colNames : [
'아이디',
'이름',
'나이',
'성별',
'직위'
],
colModel : [
{ name : 'id', width:40, align:'center'},
{ name : 'name', width:80, align:'left' },
{ name : 'age', width:80, align:'left' },
{ name : 'sex', width:80, align:'right' },
{ name : 'position', width:50, align:'right' }
],
pager : '#pager',
rowNum : '10',
multiselect : true,
postData : {
id : 'id',
name : 'name'
}
});
});
|
cs |
- name : 출력할 데이터의 이름이다. 서버에서 받은 데이터의 변수명을 명시해준다.
- index : 칼럼 정렬 시 서버에 넘어가는 값이다. index값을 설정하지 않으면 name값이 넘어간다.
- width : 칼럼의 넓이를 설정한다.
- align : 칼럼 내 데이터의 정렬을 설정한다.
- hidden : 데이터 값은 설정하고 화면에서 보이고 싶지 않을 때 사용한다.
- formatter : 데이터로 들어온 값을 특정 형식으로 변환해서 보여줄 수 있다.
rowId 가져오기
선택한 열(row)의 데이터를 가져오기 위해선 해당 열의 id가 필요하다.
getGridParam를 사용하여 selrow를 가져오는 방식이다.
|
1
2
3
4
|
var addVendor = function() {
var rowid = $("#testGrid").jqGrid("getGridParam","selrow"); // 선택한 열의 아이디값
var rowid = $("#testGrid").getGridParam("selrow");
}
|
cs |
"selarrrow"를 사용하면 다중으로 선택한 모든 열의 rowId를 "배열"로 가져온다.
하나만 선택해도 배열로 가져온다.
|
1
2
|
var rowid = $("#testGrid").jqGrid("getGridParam","selarrrow");
var rowid = $("#testGrid").getGridParam("selarrrow");
|
cs |
rowData 가져오기
rowId를 가지고 선택한 row의 데이터를 가져올 것이다.
rowId를 사용하지 않으면 현재 화면에 표출되고 있는 모든 열의 데이터를 가져온다.
|
1
2
3
4
5
6
7
8
9
10
11
|
//모든 열의 데이터 가져오기
var allRowData = $("#testGrid").jqGrid("getRowData");
var allRowData = $("#testGrid").getRowData();
//선택한 열의 데이터 가져오기
var selRowData = $("#testGrid").jqGrid("getRowData",rowId);
var selRowData = $("#testGrid").getRowData(rowId);
//선택한 열의 특정 데이터 가져오기
var selRowTitle = $("#testGrid").jqGrid("getRowData",rowId).bbsTitle;
var selRowHit = $("#testGrid").getRowData(rowId);.bbsHit;
|
cs |