jqGrid：如何刪除行/從「navButtonAdd」和「delGridRow」？

Question

我遇到了jqGrid數據網格的問題。 我需要用「刪除」按鈕刪除一行或多行。 這裏我的代碼：

$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」選項選中的行/秒的ID /秒（它的工作原理）。 該網址以json格式返回響應。此答案表示操作是否成功。 我需要顯示該消息的提醒，我該怎麼辦？ 另一個問題是，當我點擊「刪除」按鈕（在jqGrid的底部）時，它會顯示一個帶有「您想要刪除選定項目？」的問題的ajax窗口，其中「是」輸入和「沒有「輸入。當我點擊「是」時，這個ajax窗口不會關閉！

謝謝！

但丁

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] 
} 

關於你的第二個問題，我不知道爲什麼Ajax的窗口不會關閉。您是否調試過代碼，以確定當時是否收到JavaScript錯誤？如果沒有，您可能需要發佈一個小例子來說明問題。

Answer 2

使用HTTP GET進行刪除操作並不好。你是否希望在同一個URL上的以前的服務器響應將被緩存，而不是發送到服務器？默認值mtype是'POST'。如果在服務器端有RESTfull服務，則需要使用mtype: 'DELETE'，但'GET'的使用只對某些不會刪除服務器上任何內容的虛擬代碼有意義。

此外，您使用的參數dataType: 'json'不存在delGridRow（請參閱the documentation）。即使您使用ajaxDelOptions: { datyType: "json" }，您也會得到服務器響應（請參閱Justin的答案），不會自動從JSON轉換爲對象。原因是delGridRow的當前代碼使用complete回調代替success回調（請參閱here）。所以如果你從服務器得到JSON響應，你必須在afterSubmit回調中明確地調用$.parseJSON（參見Justin的回答）。