개발/Javascript

JAVA spring 프레임워크로 하는 JqGrid cell 값 수정 (edit)

신매력 2012. 9. 14. 18:02

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";

}




완전 간단함ㅋㅋ