그리드 네비게이션바 속성

그리드 하단에 추가,수정,삭제,갱신버튼을 만들수있다.

버튼을 클릭하면 다이얼로그창이 뜨며 추가,수정이 가능하다.

$("#grid-expReserveDtlInfo").jqGrid("navGrid", "#pager-expReserveDtlInfo", {
        add: true,    //추가버튼보이기
        edit: true,   //수정버튼보이기
        del: false,
        search: false,
        refresh:false  //갱신버튼숨기기
    },
    {
        width: 350,
        reloadAfterSubmit: true,
        recreateForm: true,
        editCaption: '수정',
        closeAfterEdit: true, //수정후 다이얼로그창 닫기
        editData: {"var": "val"},
        onclickSubmit: function (params) {
            //alert("edited");
        },
        beforeShowForm: function (form) {
            // 'tr_columnName' is the column name
        }
    }, // edit options
    {
        width: 350,
        reloadAfterSubmit: true,
        recreateForm: true,
        addCaption: '추가',
        closeAfterAdd: true,  //추가후 다이얼로그창 닫기
        onclickSubmit: function (params,postdata) {
            //alert("added");
            var selRowId = $("#grid-expReserveInfo").jqGrid("getGridParam", 'selrow');
            var row = $("#grid-expReserveInfo").jqGrid('getRowData', selRowId);

            if(selRowId == undefined){
                alert("예약관리에서 먼저 선택하시오.");
                return;
            }else{
                postdata.expReserveInfoSeq = row.expReserveInfoSeq;
            }

        }
    }, // add options
    {
        onclickSubmit: function (params) { 
            //alert("deleted");
        }
    }, // delete options
    {multipleSearch: false} // search options - define multiple search
);

버튼을 추가적으로 생성하려면 아래와같은 형태로 추가하면된다.

$("#grid-expReserveDtlInfo").jqGrid('navButtonAdd', '#pager-expReserveDtlInfo',
    {
        buttonicon: 'none',
        caption: '&nbsp;&nbsp;<i class="fa fa-trash-o"></i>&nbsp;&nbsp;',
        title: "선택삭제",
        onClickButton: function () {

            if (confirm("정말 삭제하시겠습니까??") == true) {
                var selRowIds = $("#grid-expReserveDtlInfo").jqGrid('getGridParam', 'selarrrow');
                for (var i = 0; i < selRowIds.length; i++) {
                    var row = $("#grid-expReserveDtlInfo").jqGrid('getRowData', selRowIds[i]);
                    var params = {
                        "expReserveDtlInfoSeq": row.expReserveDtlInfoSeq
                    };
                    lt.ajax("../expReserveDtlInfo/remove.do", params, false);
                }

                alert("[" + selRowIds.length + ']개를 삭제하였습니다.');
                $("#grid-expReserveDtlInfo").trigger('reloadGrid');

            } else {
                return;
            }
        }
    });