jqGrid navGird edit add del 시 데이터 컨트롤 방법

 

jqGrid navGird edit add del 시 데이터 컨트롤 방법

 

jqGrid의 navGrid를 사용해 CRUD를 할때

라이브러리를 적용한 inputbox 값이 서블릿단으로 매개변수가 전달이 안되는 경우가 있습니다.

 

예를 들어 dateRangePicker 나 timepicki 를 적용해 입력받을 때 해당 값이 undefined로 전달이 됩니다.

 

colModel에 아래의 Link 처럼 설정을 하면, 추가, 수정 클릭 시 해당 라이브러리가 적용되는데,

값은 전달이 되지 않죠.

 

Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 5부 기간 조회 dateRangePicker설정

 

 

이 데이터를 바인딩 하기 위해서는 editData 옵션을 사용합니다.

navGrid 설정쪽에 추가해 주면 되는데요, 아래의 소스를 참고하세요.

grid.jqGrid('navGrid', '#'+gridOption.pager,
        {
            edit : true,
            add : true,
            del : true,
            search : false,
        },
        {
            url : gridOption.editUrl,
            afterComplete:function(data) {
                jqGridFunc.tableReload(data, '수정');
            },
            recreateForm: true,
            closeAfterEdit: true,
            errorTextFormat: function (data) {
                return 'Error: ' + data.resultMsg;
            },
            editData : {
                bttStartTime : function(){
                    return $('#bttStartTime').val();
                }
            }
        },
        {
            url : gridOption.addUrl,
            beforeShowForm: function ($form) {
                $form.find(".FormElement[disabled]").prop("disabled", false); //신규등록시 id값 disabled false 설정
            },
            afterComplete:function(data) {
                jqGridFunc.tableReload(data, '저장');
            },
            closeAfterAdd: true,
            editData : {
                bttStartTime : function(){
                    return $('#bttStartTime').val();
                }
            }
        },
        {
            url : gridOption.delUrl,
            afterComplete:function(data) {
                jqGridFunc.tableReload(data, '삭제');
            },
            delData : {
                brtId : function(){
                    const selId = $('#'+listNm).jqGrid('getGridParam', 'selrow');
                    const divId = $('#'+listNm).jqGrid('getCell', selId, 'brtId');
                    return divId.replace(/-9/,'');
                },
                bttType : function(){
                    const selId = $('#'+listNm).jqGrid('getGridParam', 'selrow');
                    const cdId = $('#'+listNm).jqGrid('getCell', selId, 'bttType');
                    return cdId.replace(/-9/,'');
                },
                dptcSeqno : function(){
                    const selId = $('#'+listNm).jqGrid('getGridParam', 'selrow');
                    const cdId = $('#'+listNm).jqGrid('getCell', selId, 'dptcSeqno');
                    return cdId.replace(/-9/,'');
                }
            }
        }
    )
    grid.jqGrid('filterToolbar',filterOption);
    this.tblResize(listNm);
},

 

위의 소스를 보시면

edit와 add 옵션에는 editData를, delete 옵션에는 delData object가 추가된 것을 보실 수 있습니다.

이곳에서 넘길 데이터의 옵스젝트를 만들어주면 되는데요,

 

신규/수정 시에는 해당 id의 value값을, 삭제시에는 클릭한 행의 데이터를 넘기도록 되어있습니다. 

 

추천 그리드 ▼

Link : https://aljjabaegi.tistory.com/593

[VanilaJS Free Grid library] Aljjabaegi Grid Grand Open