M, V 그리고 C의 각방생활(11) - jqGrid로 추가,편집,삭제해보기

Posted by 미나빠!
2010.08.11 11:00 .NET/MVC 2 각방생활


잊고 계셨을지도 모를 jqGrid 마지막편입니다.
이번 시간은 jqGrid를 이용하여 데이터를 추가, 편집, 삭제해보는 시간을 가져보도록 하겠습니다.

뷰페이지부터 보죠


지난 포스팅에 이어나갑니다. 먼저 가장 중요한 스크립트 부분을 보시면,

var updateDialog = {
url: '<%= Url.Action("Update", "Home") %>'
, closeAfterAdd: true
, closeAfterEdit: true
, modal: true
, onclickSubmit: function (params) {
var ajaxData = {};
var list = $("#list");
var selectedRow = list.getGridParam("selrow");
rowData = list.getRowData(selectedRow);
ajaxData = { dirId: rowData.dirId };
return ajaxData;
}
, width: "400"
};
$.jgrid.nav.addtext = "추가";
$.jgrid.nav.edittext = "편집";
$.jgrid.nav.deltext = "삭제";
$.jgrid.edit.addCaption = "전화번호부 추가";
$.jgrid.edit.editCaption = "전화번호부 편집";
$.jgrid.del.caption = "전화번호부 삭제";
$.jgrid.del.msg = "정말 삭제하실거에요?";
$("#list").jqGrid({
url: '<%= Url.Action("EntityGridData", "Home") %>',
datatype: 'json',
mtype: 'POST',
colNames: ['No', '이름', '전화번호', '이메일', '단축다이얼'],
colModel: [
{ name: 'dirId', index: 'dirId', width: 40, align: 'center', editable: true, editrules: { edithidden: false }, hidedlg: true, hidden: true },
{ name: 'name', index: 'name', width: 200, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'phone', index: 'phone', width: 200, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'email', index: 'email', width: 300, align: 'left', editable: true, edittype: 'text', editrules: { required: true, email: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'speedDial', index: 'speedDial', width: 200, align: 'center', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'}}],
pager: $('#pager'),
emptyrecords: "Nothing to display",
rowNum: 3,
rowList: [3, 10, 20, 50],
sortname: 'dirId',
sortorder: "desc",
viewrecords: true,
caption: '전화번호부',
ondblClickRow: function (rowid, iRow, iCol, e) {
$("#list").editGridRow(rowid, updateDialog);
}
}).navGrid('#pager',
{
edit: true, add: true, del: true, search: false, refresh: true
},
updateDialog,
updateDialog,
updateDialog

);

너무 많이 바뀌었나요? 그래도 알아보시죠? :) 굵은거~굵은거~

먼저 보이는것은 updateDialog가 보이네요. url도 보이고 submit 하고 ajax도 보이고.
데이터의 추가,편집,삭제시에 뜨는 팝업창에서 할일들이죠. Home 컨트롤러의 Update라는 액션메쏘드를 호출할거고요.
추가, 편집 후에는 창을 닫을 것이고(closeAfterAdd: true, closeAfterEdit: true), 모달창이고(modal: true), submit시 ajax를 사용하는 것 같아보이네요^^

다음으로 보이는게 $.jgrid.nav... 입니다. 이것은 지난 시간에도 말씀드렸던 grid.locale-en.js 을 수정하는 부분입니다. 이런 언어파일에는 디폴트값이 들어가 있다고 말씀드렸었죠? 기억하시죠? ;;

$.jgrid.edit = {
addCaption: "Add Record",
editCaption: "Edit Record",
bSubmit: "Submit",
bCancel: "Cancel",
bClose: "Close",
processData: "Processing...",
msg: {
required:"Field is required",
number:"Please, enter valid number",
minValue:"value must be greater than or equal to ",
maxValue:"value must be less than or equal to",
email: "is not a valid e-mail",
integer: "Please, enter valid integer value",
date: "Please, enter valid date value"
}
};
$.jgrid.del = {
caption: "Delete",
msg: "Delete selected record(s)?",
bSubmit: "Delete",
bCancel: "Cancel",
processData: "Processing..."
};
$.jgrid.nav = {
edittext: " ",
edittitle: "Edit selected row",
addtext:" ",
addtitle: "Add new row",
deltext: " ",
deltitle: "Delete selected row",
searchtext: " ",
searchtitle: "Find records",
refreshtext: "",
refreshtitle: "Reload Grid",
alertcap: "Warning",
alerttext: "Please, select row"
};

뷰페이지에서 수정한 부분은 두껍게 표시하였습니다.

$.jgrid.edit 의 msg중 required:"Field is required", email: "is not a valid e-mail" 이 부분이 뷰페이지의 colModel의 editrules: { required: true, email: true } 값과 매치가 되는 거죠.
또, grid의 네비게이션바에서 추가, 편집, 삭제 표시가 이미지로만 되어있었던 것을( $.jgrid.nav 의 add,edit,del 텍스트값이 빈값으로 되어있죠?) 뷰페이지에서 타이틀을 달아본겁니다.

나머지 부분도 재미있게 수정해서 테스트해보세요^^ 버튼 이름 변경, 필수값 에러 메시지, 경고메시지 등이 수정가능하네요.



데이터를 처리하자


컨트롤러의 액션메쏘드가 추가되었겠죠? 다음은 HomeController의 추가된 Update 액션메쏘드입니다.

public ActionResult Update(TelDir telInfo, FormCollection formCollection)
{
var operation = formCollection["oper"];
if (operation.Equals("add"))
{
TelDir telData = new TelDir();
telData.name = telInfo.name;
telData.phone = telInfo.phone;
telData.speedDial = telInfo.speedDial;
telData.email = telInfo.email;
_db.AddToTelDirSet(telData);
_db.SaveChanges();
}
else if (operation.Equals("edit"))
{
var telData = _db.TelDirSet.First(m => m.dirId == telInfo.dirId);
telData.name = telInfo.name;
telData.phone = telInfo.phone;
telData.speedDial = telInfo.speedDial;
telData.email = telInfo.email;
_db.SaveChanges();
}
else if (operation.Equals("del"))
{
var telData = _db.TelDirSet.First(m => m.dirId == telInfo.dirId);
_db.DeleteObject(telData);
_db.SaveChanges();
}
return Content("ok");
}

각 요청(add,edit,del) 대로 분기하여 처리하도록 하였습니다.



이제야 보는구나


실행을 해서 결과화면을 보면


멋드러지게 지난시간과는 다른 모습의 grid 가 있는 것을 확인할 수 있습니다. 추가,편집,삭제 버튼이 들어가 있고 옆에 리프레쉬 버튼도 있네요.

추가 버튼을 누르면


깔끔한 박스가 뜨네요. 전 슈퍼맨을 등록해보도록 하겠습니다. 값을 입력하지 않고 그냥 Submit 버튼을 살짝 눌러보시면 이름 입력하라고, 전화번호 입력하라고 아우성일겁니다. editrules: { required: true } 이것때문이죠. 매치된 메시지는 언어 스크립트에 있는 required:"Field is required" 이고요. 값을 정상적으로 입력후에 Submit을 하면...
바로바로 처리가 가능하네요^^ 모달창이 닫히는 부분은 위에서 설명드렸던 closeAfterAdd: true 때문인거죠. 편집하는 부분도 해볼까요? closeAfterEdit: truefalse로 하여 테스트해보세요. 모달창이 닫히지 않고 수정한 값들이 화면의 울렁거림 없이 처리가 되는 것을 확인하실 수 있습니다.

편집하는 부분을 테스트 하시려면 먼저 수정하려는 해당 로우(row)를 선택하신 후 편집 버튼을 클릭하시거나, 해당 로우를 더블클릭하시면 됩니다. 해보시죠?^^;


마지막으로 정말 삭제하실거에요? 를 본후 노는 시간을 마치도록 하겠습니다.




마무리요


정말 jquery 관련 플러그인들은 참 편리하네요. 이렇게 손쉽게 처리가 가능하니 말이죠.
암튼, 이번시간으로 jqGrid는 마치겠습니다. 뭐 한것도 없이 마친다고 하니 웃기네~ 라고 말씀을 해주셔도 마칠겁니다.^^;

아직은 무덥고, 다양한 날씨속에서 지내는 지금, 건강 꼭 챙기세요. 감사합니다^^

참고자료 : http://elijahmanor.com/webdevdotnet/post/jQuery-jqGrid-Plugin-Add-Edit-Delete-with-ASPNET-MVC.aspx


이 댓글을 비밀 댓글로