✨해당 글은 필자가 공부하면서 정리해놓은 글입니다. 틀린 부분과 잘못된 부분이 있으면 언제든지 댓글 남겨주시면 감사하겠습니다.
이클립스 환경설정
1. 이클립스에서 Dynamic Web Project를 생성한다.
2. js 와 css 폴더를 만든다.
3. jqGrid 압축 파일을 다운로드 받는다.
4. 압축을 풀어 js 는 js 폴더에, css는 css 폴더에 집어 넣는다.
5. jqGrid 테마 파일을 다운로드 받는다.
테마가 즉석에서 눈에 보이므로 세팅도 정말 편하다.
세팅을 마쳤으면 다운로드 클릭하여 테마를 다운 받자!
테마 파일을 다운 받았으면
이 zip 파일 안에 다음과 비슷한 이름을 가진 css 파일이 있을 것이다.
jquery-ui-1.10.0.custom.min.css
( jqGrid에서 min 이 붙은건 압축된 버젼이라고 생각하면 된다. 개발자용으로 살살 디버깅도 하고 싶으면 min 이 없는 걸 사용하면 된다.)
그 파일을 css 폴더 안에 집어 넣자.
아. 그리고 images 폴더도 하나 더 만들어서 images 안의 파일도 집어 넣자.
이 작업을 모두 마치면 다음과 같은 폴더 구조가 될것임.
6. step 5. HTML 에 적용 시키기
- css 파일과 js 파일을 인클루드 하자 ( 순서가 되게되게 중요하다!)
- 데이터 샘플
let dataArray = [];
function makeTable(id, array){
$("#"+id).jqGrid({
datatype: "local",
height: 250,
width : 630,
colNames:['일시','속도', 'RPM', '브레이크','상태'],
colModel:[
{name:'fOcurDtmc', align:'right'},
{name:'spd', align:'right'},
{name:'rpm', align:'right'},
{name:'brkYn', align:'right'},
{name:'status', align:'right'}
],
caption: "DTG 데이터"
});
for(var I in array){
$("#"+id).jqGrid('addRowData',i+1,array[i]);
}
}
makeTable('table1', dataArray);
이렇게 잘 나온다.
그리드는 어떻게 동작할까?
Step 1 : 클라이언트가 "페이지를" 서버에게 요청
Step 2 : 서버는 요청한 페이지를 응답 -> 페이지가 로드 된 후 스크립트 호출
Step 3 : 스크립트 내에 있는 그리드는 Ajax 통신으로 데이터를 가지고 와서 html내에 있는 table에 그려주는 방식으로 동작
그리드 옵션
-
url : 데이터를 가지고 올 수 있는 주소
-
mtype : 요청방식 (POST/GET)
-
datatype : 가지고 오는 데이터의 타입을 설정
-
colNames : 그리드 각각의 컬럼에 출력되는 이름 (
배열로 설정) -
colModel : 각 컬럼에 대한 상세 정보 서버로 부터 받아온 데이터를 매핑해서 출력
-
jsonReader / xmlReader : 데이터 타입이 json/xml일 경우 reader를 통해서 데이터를 어떻게 읽어드릴지 설정
-
rowNum : 초기에 출력할 데이터의 개수를 설정
-
pager : 그리드 테이블 및에 div를 넣어주고 그 div의 id값을 쓰면 됨
-
multiselect : row마다 selectbox가 생김
colModel Option
-
colModel의 기본적인 특징은 데이터를 매핑 해줌
-
매핑이 이뤄지는 방식은 colModel 옵션 중 하나인
"name"을 이용함 -
"name" : value 값을 데이터의 변수명과 일치시켜주면 자동으로 매핑이 된다.
-
name : 출력할 데이터의 이름
(서버에서 받은 데이터의 변수명을 명시함)- 중요한 부분은 "서버에서 받은 데이터라는 점"
- 중요한 부분은 "서버에서 받은 데이터라는 점"
-
index : 컬럼 정렬 시 서버에 넘어가는 값
- index값을 설정하지 않으면 name 값이 넘어감
-
width : 컬럼의 넓이 설정
-
align : 컬럼 내 데이터의 정렬 설정
-
hidden : 데이터값은 설정하고 화면에 보이고 싶지 않을 때 사용
-
formatter : 데이터로 들어온 값을 특정 형식으로 변환해서 보여줌
-
formatter는 기본적으로 제공해주는 타입도 존재하지만, 사용자가 자기 스타일대로 바꾸어서 사용할 수 있는 custom_formatter도 존재함.
-
custom_formatter는 함수의 형태로 구성되어있음
-
파라미터로 받는 값은(cellValue, options, rowObject)
-
파라미터 명은 바뀌어도 되지만, 순서는 지켜야함
-
cellValue : 형식이 바뀔 값 (초기에 들어온 데이터)
-
options : 해당 row의 colModel의 정보와 rowId의 정보가 들어있음
-
rowObject : 해당 row의 데이터 정보 전부를 가지고 있음
-
-
-
해당 내용을 가지고 예제를 작성했다.
var $Grid = {};
var arrayData = [
{id : '2015001', name : 'jihwan', age : '20', sex : 'male'},
{id : '2015002', name : 'hower', age : '22', sex : 'female'},
{id : '2015003', name : 'hoju', age : '23', sex : 'male'},
];
function makeTable(id, arrayData) {
$("#"+id).jqGrid({
datatype : "json",
mtype : "get",
colNames : [ // 화면에 출력 될 colName
'아이디',
'이름',
'나이',
'성별'
],
colModel : [
{name : 'id', width : 50, align : 'center'},
{name : 'name', width : 90, align : 'left'},
{name : 'age', width : 90, align : 'left'},
{name : 'sex', width : 90, align : 'right', formatter : function(cellValue,options,rowObject) {
if(cellValue == 'male') {
return '남자';
}else if (cellValue == 'female'){
return '여자';
}
}}
],
pager : '#pager',
rowNum : '10',
multiselect : true
})
for(var key in arrayData){
$("#"+id).jqGrid('addRowData',key+1,arrayData[key]);
}
}
makeTable('grid',arrayData);
잘 출력 되는 것을 볼 수 있다.
다음은 API를 이용해서 호출 받은 값을 그리드로 매핑시키고, 어떤 jqgrid의 기능이 있는지 파악해 볼 예정이다.
