티스토리 뷰

JqGrid에서 셀을 클릭하면 입력창으로 바뀌고, 엔터치면 입력된 내용으로 수정시키기.




1. 셀을 입력모드로 바꿀지의 옵션을 지정해야함. 


jqGrid 소스의 일부

colModel:[

           {name:'id', index:'id', width:55, key:true},

           {name:'invdate', index:invdate', width:90},

           {name:'name', index:'name asc, invdate', width:100, editable:true},

           {name:'amount', index:'amount', width:80, align:"right"},

           {name:'txt', index:'tax', width:80, align:"right}

    ], 


name만 변경할 수 있도록 설정해놓았다.

editable이 없을시에는 기본으로 false 이다.


key는 DB의 Primary Key가 될 것에 true 옵션을 준다. 

그래야 어떤 행의 어떤 컬럼을 수정할지 쿼리 where절에서 쓰니깐...



2. 어떤 셀인지, 어떤 값인지, 어떤 key인지 파라미터를 넘긴다.


옛날에 파라미터 넘기는법 찾으려고 고생했던 기억이 난다ㅠㅠ

이걸 읽고있는 당신은 복받은 사람ㅋㅋㅋㅋ


 $("#test").jqGrid({

      ..... 생략,

     cellEdit:true,

     cellsubmit:'remote',

     cellurl:'/test/update',

     

     beforeSubmitCell : function(rowid, cellname, value) {   // submit 전

          return {"id":rowid, "cellName":cellname, "cellValue":value}

     },


     afterSubmitCell : function(res) {    // 변경 후

         var aResult = $.parseJSON(res.responseText);

         var userMsg = "";

         if((aResult.msg == "success")) {
             userMsg = "데이터가 변경되었습니다.";
         }

         return [(aResult.msg == "success") ? true : false, userMsg];

         /*

              +++ 추가 내용

              사용자가 afterSubmitCell을 구현하는 경우

              [성공여부, 띄울메시지] 배열을 리턴해야한다고 함

              (나무인형님 댓글 참조)

         */

     }

});



beforeSubmitCell함수에서는 세개의 파라미터를 컨트롤러로(cellurl) 보내도록 설정할 수 있다.


id는 위에서 지정했던 key 값이고. 

cellName은 어떤 컬럼인지,

cellValue는 변경하려는 데이터값이다.



3. 업데이트 처리 



@RequestMapping("/test/update")

public @ResponseBody String cellEdit(

    @RequestParam(value = "id") Integer id,

    @RequestParam(value = "cellName") String cellName,

    @RequestParam(value = "cellValue") String cellValue) {


    // Edit 구현하기


    return "SUCCESS";

}




완전 간단함ㅋㅋ



댓글
  • 프로필사진 5zzang 안녕하세요. 저도 이번에 Grid로 JQGrid를 사용해서 개발을 하다.
    지금 고민중에 빠진 것이 있어, 혹시 신매력님께서도 똑같은 고민을 하셨던 적이 있었는지 하여 물어봅니다. :)
    colModel 에서 edittype:"select"으로 설정하였을 경우 editoptions을 사용하여 해당 selectBox의 element를 구성할 수 가 있는데요.
    jqgrid의 wiki에서는 해당 elements를 정적으로 생성하는 방법뿐이 나와있질 않아, 동적으로 생성해보신적이 있는지 궁금해서 여쭈어 봅니다.
    저는 해당 elements들을 똑같이 json으로 받아와서 구성을 하고 싶은데요. 혹 동적으로 하셨다면, 그에 대한 도움을 좀 받을 수 있을까요?
    그리고 혹, search에 대해서 어떻게 구현을 하셨는지 궁금합니다. 저도 현재 spring 과 연계해서 개발을 하고 있는데,
    db쪽 모듈에는 mybatis를 쓰고 있습니다.
    search를 하게 되면 해당 검색조건 들을 다시 서버로 보내서 데이터를 요청하는데요.
    제가 구현하고픈 형태는 이미 로딩되어있는 데이터에서 해당 데이터만 보여주고 싶은데요. 신매력님또한 그런 부분이 있으셨는지 궁금합니다.
    제가 jqgrid를 이틀째 해보는거라... 너무 궁금한게 많네요..;;; 그럼 좋은 하루 되세요. :)
    2012.11.21 18:15 신고
  • 프로필사진 신매력 1. selectBox의 element를 동적으로 구성하는방법
    저는 정적으로밖에 안해봤지만 구글신에게 물어보니까 방법이 있네요~!
    editoptions의 속성중에 dataUrl 이 있는데요.
    editoptions:{dataUrl:"액션주소"}
    이렇게 쓰고 액션안에서 <select>에대한 태그 내용을 스트링으로 리턴하면 되네요.
    더 자세한 내용은 jqgrid dataUrl이라고 검색하면 나올겁니다 ㅋㅋ

    2. search
    이건 저도 고민해봤었는데요. 방법이 없다고 결론내렸어요 ㅋㅋ
    jqgrid 자체에서 search는 서버를 통해서 내려주도록 구성되어있는듯요.
    포스팅된 글 참조하시면, list 뿌리는 메소드에서 search에 대한 파라미터를 받게되어있죠.
    grid가 내용 분석해서 search해주지 않고, 쿼리를 통해서 서버에서 검색하도록 합니다

    좋은하루 되세요 ~
    2012.11.22 17:34 신고
  • 프로필사진 개발꽃 지나가는 길에 들러봤습니다. 설명이 오목조목 잘 되어있어서 나중에 참고하려고
    봐두었습니다^^ 같은 여자개발자라서 그런지 더 친근하게 느껴지네요ㅋ
    한번 쫙 둘러보고 가려구요 ^^ 수고하세요~!
    2013.02.15 11:13 신고
  • 프로필사진 신매력 댓글 감사합니다^-^ 행복한 하루 되세요 ~ 2013.02.15 14:41 신고
  • 프로필사진 onname 위 방식대로 했는데 afterSubmitCell의 성공창이 뜨고 난 후에는
    jquery.jqGrid.src.js 줄9856
    정의되지 않음 또는 null 참조인 '0' 속성을 가져올 수 없습니다.
    라는 에러가 뜹니다.
    celledit이 꼭 필요한데 답답하네요. 에러 원인을 아시면 답변 좀 부탁드립니다
    2013.04.15 12:29 신고
  • 프로필사진 신매력 무슨 에러인지는 모르겠지만
    afterSubmitCell에서 성공창이 떴다면,
    변경은 정상적으로 이루어졌을 것 같은데요.
    그 에러가 나면서 어떤 동작이 안되시는지 궁금하네요
    2013.04.15 13:49 신고
  • 프로필사진 onname 네~ 변경은 잘 이루어졌는데
    그 다음에 에러창이 뜹니다 저도 그 이유를 모르겠습니다.
    그와 같은 경우는 아무리 찾아도 없더군요

    jqgrid.src.js에서 에러 발생되는 부분을 찾아봤습니다
    complete: function (result, stat) {
    $("#lui_"+$t.p.id).hide();
    $t.grid.hDiv.loading = false;
    if (stat == 'success') {
    var ret = $($t).triggerHandler("jqGridAfterSubmitCell", [$t, result, postdata.id, nm, v, iRow, iCol]) || [true, ''];
    if (ret[0] === true && $.isFunction($t.p.afterSubmitCell)) {
    ret = $t.p.afterSubmitCell.call($t, result,postdata.id,nm,v,iRow,iCol);
    }
    if(ret[0] === true){ //이부분에서 에러
    $(cc).empty();
    $($t).jqGrid("setCell",$t.rows[iRow].id, iCol, v2, false, false, true);
    $(cc).addClass("dirty-cell");
    $($t.rows[iRow]).addClass("edited");
    $($t).triggerHandler("jqGridAfterSaveCell", [$t.rows[iRow].id, nm, v, iRow, iCol]);
    if ($.isFunction($t.p.afterSaveCell)) {
    $t.p.afterSaveCell.call($t, $t.rows[iRow].id,nm, v, iRow,iCol);
    }
    $t.p.savedRow.splice(0,1);
    } else {
    $.jgrid.info_dialog($.jgrid.errors.errcap,ret[1],$.jgrid.edit.bClose);
    $($t).jqGrid("restoreCell",iRow,iCol);
    }
    }
    },
    2013.04.15 14:24 신고
  • 프로필사진 신매력 ret에 값을 잘 못가지고 오고 있는것같은데..
    구글에서 찾아보니까 그부분에 예~전에 버그가 있었나봐요
    지금꺼하고 소스가 많이 달라졌던데
    혹시 모르니 jquery.jqGrid.src.js 만 버전을 바꿔보시면 어떨까요?
    2013.04.15 16:06 신고
  • 프로필사진 나무인형 jqGrid 사용하면서 좋은 글이 있어서 많이 참고했는데 저도 역시 onname 님과 같은 오류가 발생했었는데, 이유를 찾아보니 개발자가 afterSubmitCell 을 구현할 경우 리턴 값으로 array를 반드시 반환해야 합니다. [정상처리여부, 에러메세지]의 형태로 말이죠.. 그렇지 않으면 사용자가 재정의 한 afterSubmitCell 함수의 실행 후 리턴값을 처리하는 블록에서 ret 라는 배열이 undefined 이기 때문에 ret[0]을 참조하려고하면 "null참조인 '0' 속성을 가져올 수 없습니다" 라는 에러가 발생합니다.

    afterSubmitCell : function(res, rowid, cellname, value, iRow, iCol) { // 변경 후
    var aResult = $.parseJSON(res.responseText);
    var userMsg = "";

    if(!(aResult.msg == "success")) {
    userMsg = "오류가 발생했습니다.";
    }

    return [(aResult.msg == "success") ? true : false, userMsg];
    }

    이런식으로 맨 마지막에 배열을 리턴해주시면 해결됩니다!
    2013.12.10 14:47 신고
  • 프로필사진 나무인형 사용자 정의 오류 시 jqGrid의 내장 dialog를 사용하지 않으실 거라면 jquery.jqGrid.src.js 에서 saveCell 함수 내의 ret = $t.p.afterSubmitCell.call($t, result, postdata.id, nm,v, iRow, iCol); (10095 line) 의 리턴 대입을 제거하셔도 됩니다. 2013.12.10 14:54 신고
  • 프로필사진 신매력 나무인형님 댓글 감사합니다 ^^
    제가 예전에 구현했던 소스들은 예전회사에 있어서
    개인적으로 다시 해봤어야 했는데 ㅠㅠ
    제가 배열 리턴하는 부분을 생략했거나 버전업이 되면서 바뀌었거나 하겠네요..
    이런 친절한 댓글 남겨주셔서 다시한번 감사드려요!
    댓글 달아주신 내용으로 내용 수정할게요~
    2013.12.15 20:31 신고
  • 프로필사진 onname 네~ 최신 버전으로 했는데도 안되네요
    ㅜㅜ
    2013.04.15 16:22 신고
  • 프로필사진 신매력 혹시 edit 하는 서버단에서 리턴을 안해주신건 아니죠?
    SUCCESS 스트링이라던가요..
    그렇게 하셨는데도 안되면 저도 잘 모르겠네요 ㅠㅠ
    2013.04.16 10:14 신고
  • 프로필사진 onname 당근 해줬죠
    responseText 얼럿창도 잘 떴었거든요
    그 이후부터 말썽을 부리네요
    2013.04.23 17:37 신고
  • 프로필사진 궁금궁금 안녕하세요.ㅠ혹시 키값이 여러개 일 경우에는 이 방법을 못쓰는건가요? 2013.10.23 19:01 신고
  • 프로필사진 신매력 네 제이큐그리드에선 키값 하나만 인식해서 가져오도록 되어있어서요 ~ 2013.10.30 20:55 신고
  • 프로필사진 신매력 예전에 잘못 달은 댓글 내용 수정합니다.
    여러 키 값을 이용하는 경우에도 사용 가능합니다~
    Ajax로 보낼 때 모든 값을 다 보내면 돼요.
    2015.04.16 10:39 신고
댓글쓰기 폼