[jqGrid] 기본 CRUD
jQGrid 를 처음 개발 시에 참고할 만한 자료가 많지 않다보니 아무래도 처음 접근이 힘든 것 같다.
그래서 필요한 내용들을 정리해 보기로 했다.
같이 일하는 친구가 만들어 놓은 예제인데 기본적인 내용이 모두 들어 있다.ㅋ
<jqGridSample.jsp>
…
<table id=" tableid" …></table>
<div id="pagerid"></div>
<jqGridSample.js>
$(doucmnet).ready(function() {
$("#tableid").jqGrid({
url : "/myprj/xxx/yyy" // 서버 요청 URL
,datatype : "json"
,postData : {
xxx : "",
yyy : "",
,mtype : "POST"
,colNames : [
…
]
,colModel : [
…
]
…
,pager : $("#pagerid") // 그리드 하단의 페이징 영역
,hidegrid : false // grid 전체를 접는 오른쪽 상단 아이콘 disable
,jsonReader : {
root : 'jsonRoot' // json data's root element
,repeattiems : false // json 데이터 구조 설정
}
,beforeSelectRow : function(invid) { // 선택한 로우 색상 변경
setClickRowColor('tableid', invid);
return true;
}
,ondbClickRow : function() { // 더블 클릭 시 수정 팝업 open
var gridNm = 'tableid'; // 수정 팝업을 띠울 그리드명
var editUrl = 'editUrl' // 수정 시 연결될 URL
var caption = '차량 색상 수정'; // 수정 및 등록 팝업 타이틀명
var priKey = ['변경col1', '변경col2' ] // 수정 및 등록 팝업에서 그리드 항목 중edit 항목 설정
}
});
});
//추가 버튼 클릭
$("#btn_addCarCol").click(function() {
var gridNm = tableid'; // 대상이 될 그리드 명
var addUrl = 'insertUrl'; // 추가시 연결될 url
var caption = '차량색상 추가'; // 수정 및 등록 폼 타이틀명
var priKey = ['변경col1', ' 변경col2']; // 수정 및 등록 폼 시 eidtable 이 변경될 컬럼명
fnAddRow(gridNm, addUrl, caption, priKey);
});
//삭제 버튼 클릭
$("#btn_delCarCol").click( function() {
var gridNm = tableid'; // 대상이 될 그리드 명
var delUrl = 'deleteUrl'; // 삭제시 연결될 url
var priKey = ['변경col1', '변경col2']; // 해당 url로 함께 넘어갈 postData 컬럼명
fnDelRow(gridNm, delUrl, priKey);
});
<common.js>
function setClickRowColor(gridNm, rowId){
var ids = $('#'+gridNm).getDataIDs();
$.each(ids, function(idx){
idx+=1;
if(idx==rowId){
$('#'+gridNm).setRowData(idx, false, {background:'#DDFFFF'});
}else{
$('#'+gridNm).setRowData(idx, false, {background:'#FFFFFF'});
}
});
}
function fnAddRow(gridNm, addUrl, caption, priKey){
var options = {
modal:true, //modal 여부
url :addUrl, //등록 url
addCaption: caption, //등록폼 타이틀
savekey : [true, 13], //엔터키
recreateForm:true, //수정 및 등록 시 폼 재생성 - 필수
beforeShowForm :function(){
//수정 및 등록시 editable이 변경될 컬럼 세팅
setPriKeyEdit(gridNm, priKey, true);
},
closeOnEscape: true,
closeAfterAdd:false,
reloadAfterSubmit : true,
afterSubmit:function(res){
var result = eval("("+res.responseText+")");
if(result.msg!='fail'){
alert("성공적으로 추가하였습니다.");
return true;
} else {
alert("코드가 중복됩니다.");
return false;
}
}
};
$('#'+gridNm).jqGrid('editGridRow', 'new', options);
}
function fnEditRow(gridNm, editUrl, caption, priKey){
var rowid = $('#'+gridNm).getGridParam("selrow"); //선택한 로우의 id
var data = $('#'+gridNm).getRowData(rowid); //선택한 로우의 데이터객체
/*******************************************************/
/**eidtColum의 key와 val를 json데이터 형식으로 파싱해준다**/
/*******************************************************/
var settings = $.extend({});
var editData = function(){
var arr = [];
$.each(data, function(key, val) {
for(var i=0; i<priKey.length; i++){
if(key==priKey[i]){
var next = key + ": ";
next += "'"+val+"'";
arr.push( next );
}
}
});
return "{ " + arr.join(", ") + " }";
};
editData = eval("("+editData(settings)+")");
/*******************************************************/
setPriKeyEdit(gridNm, priKey, false); //수정 및 등록시 editable이 변경될 컬럼 세팅
var options = {
modal:true,
url :editUrl,
editCaption: caption,
savekey : [true, 13],
recreateForm:true,
reloadAfterSubmit : true,
closeAfterEdit: true,
editData:editData,
onclickSubmit: function(){
alert("수정이 완료되었습니다.");
}
};
$('#'+gridNm).jqGrid('editGridRow', rowid, options);
setPriKeyEdit(gridNm, priKey, true); //수정 및 등록시 editable이 변경될 컬럼 세팅
}
function fnDelRow(gridNm, delUrl, priKey){
var rowid = $('#'+gridNm).getGridParam("selrow"); //선택한 로우의 id
var data = $('#'+gridNm).getRowData(rowid); //선택한 로우의 데이터
/******************************************************/
/**delColum의 key와 val를 json데이터 형식으로 파싱해준다**/
/******************************************************/
var settings = $.extend({});
var delData = function(){
var arr = [];
$.each(data, function(key, val) {
for(var i=0; i<priKey.length; i++){
if(key==priKey[i]){
var next = key + ": ";
next += "'"+val+"'";
arr.push( next );
}
}
});
return "{ " + arr.join(", ") + " }";
};
delData = eval("("+delData(settings)+")");
/******************************************************/
var options = {
modal:true,
url : delUrl,
savekey : [true, 13],
closeOnEscape: true,
reloadAfterSubmit : true,
delData:delData
};
if(rowid!=null){
$('#'+gridNm).jqGrid('delGridRow', 'del', options);
}else{
alert("삭제할 행을 선택하여 주세요.");
}
}