jqGrid : 행/삭제 방법 "navButtonAdd"및 "delGridRow"?

Question

jqGrid DataGrid에 문제가 발생했습니다. "삭제"버튼을 사용하여 하나 이상의 행을 삭제해야합니다. 여기 내 코드 : 코드의

$grid.navGrid('#pager', { edit: false, add: false, del: false, search: false }); 
$grid.navButtonAdd('#pager', { 
    caption: "Delete", 
    buttonicon: "ui-icon-del", 
    position: "last", 
    onClickButton: function() { 
     alert("Deleting Row"); 
     row_ids = $grid.getGridParam('selarrrow'); 
     $grid.delGridRow(row_ids, { 
      dataType: 'json', 
      mtype: 'GET', 
      url: '<?php echo $_SERVER['PHP_SELF'].'?app=my_app&action=record_delete'; ?>' 
     }); 
    } 
}); 

이 조각은에 보내 "URL"옵션을 선택한 행/S의 ID/S는 (작동). 그 URL은 json 형식의 응답을 반환합니다.이 응답은 작업이 성공했는지 여부를 나타냅니다. 해당 메시지와 함께 경고를 표시해야합니까, 어떻게해야합니까? 또 다른 문제는 "삭제"버튼 (jqGrid 하단)을 클릭하면 "예"입력과 "예"입력과 함께 "선택한 항목을 삭제 하시겠습니까?"라는 질문이있는 아약스 창이 표시됩니다. 아니오 "입력. "예"를 클릭하면이 아약스 창이 닫히지 않습니다!

감사합니다.

단테

EDIT [1] & & [2]

$(document).ready(function() 
{ 
    $grid = $("#list"); 
    fixPositionsOfFrozenDivs = function() { 
     if (typeof this.grid.fbDiv !== "undefined") { 
      $(this.grid.fbDiv).css($(this.grid.bDiv).position()); 
     } 
     if (typeof this.grid.fhDiv !== "undefined") { 
      $(this.grid.fhDiv).css($(this.grid.hDiv).position()); 
     } 
    }; 

    $grid.jqGrid({ 
     url: '<?php echo $_SERVER['PHP_SELF'].'?app=my_app&option=get_records'; ?>', 
     datatype: 'json', 
     mtype: 'GET', 
     height: 'auto', 
     width: window.innerWidth-35, //width: '1225', 
     colNames: ['ID', 'Column A', 'Column B', 'Column C', 'Column D'], 
     colModel: [ 
      { name: 'id', index: 'id', width: 130, align: 'center', search: true, 
       sortable: true, frozen: true, editable: true, edittype: 'text', formatter: 'showlink', 
       editoptions: { size: 130, maxlength: 50 }, stype: 'text' }, 
      { name: 'col_a', index: 'col_a', width: 250, align: 'left', search: true, 
       sortable: true, frozen: false, editable: true, edittype: 'text', 
       editoptions: { size: 250, maxlength: 40 }, stype: 'text' }, 
      { name: 'col_b', index: 'col_b', width: 120, align: 'left', search: true, 
       sortable: true, frozen: false, editable: true, edittype: 'text', 
       editoptions: { size: 120, maxlength: 40 }, stype: 'text' }, 
      { name: 'col_c', index: 'col_c', width: 100, align: 'right', search: true, 
       sortable: true, frozen: false, editable: true, edittype: 'text', 
       editoptions: { size: 100, maxlength: 40 }, stype: 'text' }, 
      { name: 'col_d', index: 'col_d', width: 100, align: 'right', search: true, 
       sortable: true, frozen: false, editable: true, edittype: 'text', 
       editoptions: { size: 100, maxlength: 6 }, stype: 'text' } 
     ], 
     caption: 'Objects', 
     pager: '#pager', 
     sortname: 'id', 
     sortorder: 'ASC', 
     rowNum: 25, 
     rowList: [25, 50, 100, 200, <?php echo $totrecords; ?>], 
     loadonce: true, 
     gridview: true, 
     viewrecords: true, 
     rownumbers: true, 
     rownumWidth: 40, 
     toppager: true, 
     multiselect: true, 
     autoencode: true, 
     ignoreCase: true, 
     shrinkToFit: false, 
     loadComplete: function() { 
      $("option[value=<?php echo $totrecords; ?>]").text('All'); 
     }, 
     editurl: '<?php echo $_SERVER['PHP_SELF'].'?app=my_app&option=delete_records'; ?>' 
    }); 

    $grid.jqGrid('filterToolbar', {multipleSearch: false, stringResult: false, searchOnEnter: false, defaultSearch: 'cn'}); 
    $grid.navGrid('#pager', { edit: false, add: false, del: false, search: false }); 
    $grid.navButtonAdd('#pager', { 
     caption: "Delete", 
     buttonicon: "ui-icon-del", 
     position: "last", 
     onClickButton: function() { 
      row_ids = $grid.getGridParam('selarrrow'); 
      $grid.delGridRow(row_ids, { 
       closeOnEscape: true, 
       mtype: 'POST', 
       afterSubmit: function(data_from_server, array_data) { 
        var result = data_from_server.responseText; 
        var message = eval('(' + result + ')'); 
        alert(message.query); 
       } 
      }); 
     } 
    }); 

    $grid.jqGrid('setFrozenColumns'); 
    $grid[0].p._complete.call($grid[0]); 
    fixPositionsOfFrozenDivs.call($grid[0]); 

}); 

Answer 1

당신은 당신의 메시지를 표시 할 afterSubmit 이벤트를 사용할 수 있어야합니다. jqGrid documentation에서 :

afterSubmit

화재에 응답 한 후 서버에서 수신되었습니다. 일반적으로 서버에서 상태를 표시하는 데 사용됩니다 (예 : 데이터가 성공적으로 삭제되거나 서버 측 이유로 삭제가 취소됨). 요청에서 반환 된 데이터와 id = value1, value2 유형의 게시 된 값의 배열을 매개 변수로받습니다. 이 이벤트를 사용하면 다음 항목이있는 배열이 반환됩니다. [success, message] 여기서 success은 부울 값이고 true이면 프로세스가 계속되고 false이면 오류 메시지가 나타나고 다른 모든 처리가 중지됩니다. 두 번째 문제에 관해서는

는

afterSubmit : function(response, postdata) 
{ 
    … 
    return [succes,message] 
} 

, 나는 확실하지 않다 왜 아약스 창이 닫히지 없습니다. 그 당시 자바 스크립트 오류가 발생했는지 확인하기 위해 코드를 디버깅 했습니까? 그렇지 않은 경우 문제점을 설명하는 작은 예제를 게시해야 할 수도 있습니다.

Answer 2

삭제 작업에 HTTP GET을 사용하는 것은 좋지 않습니다. 동일한 URL에서 이전 서버 응답이 캐시되고 서버로 보내지 않기를 원합니 까? mtype의 기본값은 'POST'입니다. 서버 측에 RESTfull 서비스가있는 경우 mtype: 'DELETE'을 사용해야하지만 'GET'의 사용법은 서버에서 아무 것도 삭제하지 않는 일부 더미 코드에 대해서만 의미가있을 수 있습니다.

또한 (the documentation 참조)에는 존재하지 않는 dataType: 'json' 매개 변수를 사용합니다. ajaxDelOptions: { datyType: "json" }을 사용하더라도 JSON에서 객체로 자동 변환되지 않는 서버 응답 (저스틴의 답변 참조)이 표시됩니다. 그 이유는 현재 코드 delGridRow이 success 콜백 대신 complete 콜백을 사용하기 때문입니다 (here 참조). 따라서 서버에서 JSON 응답을받는 경우 afterSubmit 콜백 내부에 $.parseJSON을 명시 적으로 호출해야합니다 (저스틴의 대답 참조).