jqGrid 관련..
예전 프로젝트(2012~2013년쯤)때 상용그리드를 사용하다가 jqGrid를 알게되었다.
그리고 다시 jqGrid를 사용하면서 jqGrid관련 자료를 찾기가 어려웠다.ㅠㅠ
자료는 많은데 내가 사용하고 싶은 부분을 찾기란.. ㅡㅡ;; 쉽지 않아 jqGrid를 정리해본다.
$("#grid").jqGrid({
url: '/managerListJsonTest.action',
caption: "시스템 관리자 리스트", // caption : 그리드의 제목을 지정한다.
datatype: "json", // datatype : 데이터 타입을 지정한다.
loadtext : '로딩중...',
mtype : 'post', // mtype : 데이터 전송방식을 지정한다.
// loadonce : true, // loadonce : rowNum 설정을 사용하기 위해서 true로 지정한다.
rowNum:10, // 한화면에 보여줄 row의 수
width:'auto', // 그리드 전체 넓이 조정 (오토 조절 가능)
autowidth:true, // 오토 조절 가능 (width 옵션과 동시 사용 불가!)
rowList:[5,10,20,30], // 한 화면에서 볼 수 있는 row의 수를 조절 가능
pager:'#pager', // 페이징을 처리할 <div> 태그의 #+id값
rownumbers: true, // row의 숫자를 표시해준다.
sortname:'idx', // 처음 그리드를 불러올 때에 정렬 기준 컬럼
// viewrecords: true, // 그리드가 보여줄 총 페이지 현재 페이지등의 정보를 노출
// multiselect: true, // 멀티 셀렉트 박스가 첫번째 컬럼에 생김
sortorder:"desc", // 정렬 기준
sortable: true, // colmodel 에서 sortable 기능 사용하려면 true!
caption:"시스템 관리자 리스트", // 그리드 상단에 그리드의 제목을 입력할 수 있음
height: "300", // 그리드 높이 설정
editurl: "URL.action", // 셀이 수정될 때 수정 요청을 받아서 처리할 URL
cellEdit: true, // 셀 수정 기능을 사용하려면 true!
cellsubmit:'remote',
cellurl:'/managerjqGridCRUD.action', // 셀 수정 후 submit url
gridview:true,
jsonReader : {
page: "page",
total: "total",
root: "resultList",
records:"record",
// 다른 사용 예) function 기능을 이용하여 사용
// page: function(obj){
// alert(JSON.stringify(obj));
// alert(obj.jObj1.page);
// return obj.jObj1.page;
// alert( $.parseJSON(obj.json).page);
// return $.parseJSON(obj.json).page;
// },
// total: function(obj){
// alert(obj.jObj1.total);
// return obj.jObj1.total;
// alert( $.parseJSON(obj.json).total);
// return $.parseJSON(obj.json).total;
// },
// root: function(obj){ },
// records: function(obj){ },
repeatitems: false
},
colNames:[
"번호",
"아이디",
"이름",
"비밀번호",
"연락처",
"이메일",
"직급",
"부서",
"승인",
"대행사코드",
"시도회코드",
"비고"
],
colModel:[
{ name : 'idx', index : 'idx', width : 100,
align : 'center', hidden : true, key:true },
{ name : 'adminID', index : 'adminID', width : 100,
align : 'left' },
{ name : 'adminName', index : 'adminName', width : 100,
align : 'left', },
{ name : 'adminPWD', index : 'adminPWD', width : 100,
align : 'left', edittype:'password',
hidden: true, editrules:{edithidden:true, required:true}, editable:true },
{ name : 'adminPhone', index : 'adminPhone', width : 100,
align : 'left', editable : true },
{ name : 'adminEmail', index : 'adminEmail', width : 100,
align : 'left', hidden:true,
editrules:{edithidden:true}, editable:true},
{ name : 'adminPosition', index : 'adminPosition', width : 100,
align : 'left', editable : true,
edittype: 'select', formatter:'select', editoptions:{ value : positionlist }},
{ name : 'adminDepart', index : 'adminDepart', width : 100,
align : 'left', editable : true,
edittype: 'select', formatter:'select', editoptions:{ value : departlist }},
{ name : 'adminAuth', index : 'adminAuth', width : 100,
align : 'left', editable : true,
edittype: 'select', formatter:'select', editoptions:{ value :
{"0":"super","1":"master","2":"manager","3":"내부대행사"
,"4":"외부대행사","9":"사용중지"} }},
{ name : 'gisaCode', index : 'gisaCode', width : 100,
align : 'left', editable : true },
{ name : 'branch', index : 'branch', width : 100,
align : 'left', editable : true },
{ name : 'adminContent', index : 'adminContent', width : 100,
align : 'left', hidden:true,
editrules:{edithidden:true}, editable:true},
],
gridComplete : function() {
//load time가져오기!
var tm = jQuery("#grid").jqGrid('getGridParam','totaltime');
$("#load_time").html("Render time: "+ tm+" ms ")
},
loadError:function(xhr, status, error) {
// 데이터 로드 실패시 실행되는 부분
alert(error);
},
onSelectRow: function(ids) {
//row 선택시 처리. ids는 선택한 row
//alert('row 선택시 ids:'+ids);
},
ondblClickRow: function (rowid, iRow, iCol, e) {
$("#grid").editGridRow(rowid, updateDialog);
},
//그리드 수정시 submit 전
beforeSubmitCell : function(rowid, cellname, value) {
return {"id":rowid, "cellName":cellname, "cellValue":value}
},
//그리드 수정시 submit 후
afterSubmitCell : function(res) {
var aResult = $.parseJSON(res.responseText);
var userMsg = "수정시 오류가 발생되었습니다.";
if((aResult.jqResult == "1")) {
userMsg = "수정되었습니다.";
alert(userMsg);
}
return [(aResult.jqResult == "1") ? true : false, userMsg];
}
}).navGrid('#pager', {
edit: true,
add : true,
del : true,
search : false,
refresh: true,
view: true
},
updateDialog,
addDialog,
deleteDialog,
{closeOnEscape:true}
)
}).trigger('reloadGrid');
설명:
jqGrid 초기화 설정은 여러가지 방법이 있다.
1)페이지 로딩시 빈 grid를 먼저 출력하고 검색조건에 따라 jqGrid로 뿌려주는 방법
2)페이지 로딩시 바로 조회하여 grid에 뿌려주는 방법
1번 경우는 추후에 업데이트..
2번 경우는 페이지 특성상 테이터가 많지 않고 바로 보여줌.
여기에선 2번방식으로 함.
jsonReader는 json방식으로 jqGrid에 맞는 json 형태로 가져와 page, rows, total, records 매핑된다.
서버단에서 데이터를 jqGrid의 json방식으로 만들어줘서 뿌려주면된다.
예)
{
"total":10,
"page":10,
"records":10,
"rows": [
{"컬럼명1:value1, 컬럼명2:value2},
{"컬럼명1:value1, 컬럼명2:value2},
]
}
아래와 같이 서버단에서 json으로 만들었다.
spring 경우는 resultMap으로 가져오면 되지만
현재 예제에선 struts2 기반으로 되어 있어서 아래와 같이 정보를 가져오게 했다.ㅠㅠ
주의) 저의 경우는
jqGrid에 root
root: "resultList", 으로 data를 매칭시켰다.
{
"cellName":null,
"cellValue":null,
"id":null,
"idx":null,
"jqResult":0,
"oper":null,
"page":1,
"records":10,
"resultList":[
{ "adminAuth":"0", "adminContent":"","adminDepart":12,"adminEmail":""
,"adminID":"chltal","adminName":"수민","adminPWD":"********","adminPhone":""
,"adminPosition":12,"adminTel":"","branch":"","gisaCode":"","idx":105
,"regDate":"2015-12-15 10:53:51.0"}
}
],
"rows":10,
"sidx":"idx",
"sord":"desc",
"total":6
}
만약 page, total 등 매핑이 되지 않으면 jqGrid에서 data를 어떻게 가져오는지 확인 바란다.
예) 이와같이 resultMap 안에 jqGrid의 매핑이 된다면....
{
"resultMap":{
"page":1,
"records":10,
"resultList":[
{ "adminAuth":"0", "adminContent":"","adminDepart":12,"adminEmail":""
,"adminID":"chltal","adminName":"수민","adminPWD":"********","adminPhone":""
,"adminPosition":12,"adminTel":"","branch":"","gisaCode":"","idx":105
,"regDate":"2015-12-15 10:53:51.0"}
}
],
"rows":10,
"sidx":"idx",
"sord":"desc",
"total":6
}
}
위의 주석처리된
page: function(obj){
return obj.resultMap.page;
}
으로 방식으로 처리 한다.
colModel는
jqGrid data에 옵션을 설정하는 부분이다.
1)
{ name : 'idx', index : 'idx', width : 100, align : 'center', hidden : true, key:true },
여기에서 idx가 DB에서 pk값임으로 key: true로 설정했다.
나중에 수정할시 idx값이 그리드상에서 hidden(숨김)으로 되어있지만 idx값을 던져준다.
2)
{ name : 'adminPWD', index : 'adminPWD', width : 100,
align : 'left', edittype:'password', hidden: true,editrules:{edithidden:true, required:true}, editable:true },
패스워드경우 edittype: 'password'로 하였고, 히든설정
editrules 경우 옵션들이 많은데 edithidden:true, required:true 설정할경우
그리드에서 보여지지 않지만 editor 할경우 패스워드 필드가 보여진다.
3)
{ name : 'adminDepart', index : 'adminDepart', width : 100, align : 'left',
editable : true, edittype: 'select',
formatter:'select', editoptions:{ value : departlist }},
그리드에서 값을 select 박스로 변경하였다.
editoptions의 값을 DB에서 코드로 가져와서 사용하였다.
처음 페이징 호출할 때
var selectValue = $.ajax({
url: "/commonSelectList.action",
data: {codetype: 'depart'},
async: false
});
var departlist = selectValue.responseJSON.resultMap;
ajax로 코드값을 호출하여 departlist 에 넣어뒀다.
물론 json방식으로 4번형식처름 가져왔다.
4)
{ name : 'adminAuth', index : 'adminAuth', width : 100, align : 'left', editable : true, edittype: 'select',
formatter:'select', editoptions:{
value : {"0":"super","1":"master","2":"manager","3":"내부대행사"
,"4":"외부대행사","9":"사용중지"}}},
그리드에서 값을 select 박스로 변경하였다.
DB에서 코드를 가져오지 않고 직접 여기에서 값을 매핑하여 처리하면된다.
navGrid 경우
그리드 하단에 추가, 편집, 삭제, 보기, 찾기 등
기능을 사용할 수 있다.
}).navGrid('#pager', {
edit: true,
add : true,
del : true,
search : false,
refresh: true,
view: true
},
updateDialog,
addDialog,
deleteDialog,
{closeOnEscape:true}
)
편집사용, 추가사용, 삭제사용, 검색 미사용, 재실행 사용, 보기 사용
navGrid에서도 옵션을 줄수 있다.
//업데이트
var updateDialog = {
url: '/managerjqGridUpdate.action'
, closeAfterEdit: true
, closeOnEscape: true
, modal: true
, width: "400"
};
//추가
var addDialog = {
addCaption: "관리자 등록"
,bSubmit: "등록"
,url: '/managerjqGridUpdate.action'
,closeAfterAdd: true
,closeOnEscape: true
,modal: true //모달창
,savekey : [true, 13] //enter키
,recreateForm:true //수정 및 등록 시 폼 재생성 - 필수
,width: "400"
,beforeInitData: function(formid) {
$("#grid").jqGrid('setColProp','adminID',{editable:true});
$("#grid").jqGrid('setColProp','adminName',{editable:true});
}
,afterShowForm: function (formid) {
$("#grid").jqGrid('setColProp','adminID',{editable:false});
$("#grid").jqGrid('setColProp','adminName',{editable:false});
}
};
//삭제
var deleteDialog = {
url: '/managerjqGridUpdate.action'
, closeAfterEdit: true
, closeOnEscape: true
, modal: true
, width: "400"
};
편집과 삭제는 기능이 비슷하다.
추가경우는 그리드에서 editable을 설정하지 않는 컬럼들이 있어서 beforeInitData 함수에서
editable설정하였고, 저장이후에 다시 editable를 설정 변경하였다.
