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 выбранных строк/с (это работает). Этот URL-адрес возвращает ответ в формате 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" }, вы получите ответ сервера (см. Ответ Джастина), который не будет автоматически преобразован из JSON в объект. Причина в том, что текущий код delGridRow использует обратный вызов complete вместо success callback (см. here). Поэтому, если вы получите ответ JSON с сервера, вам нужно будет вызвать $.parseJSON явно внутри обратного вызова afterSubmit (см. Ответ Джастина).