jqGrid: как удалить строки из navButtonAdd и delGridRow?

Я столкнулся с проблемой с сеткой данных 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:» идентификаторы выбранных строк (работает). Этот URL-адрес возвращает ответ в формате json. Этот ответ говорит, была ли операция успешной или нет. Мне нужно отобразить предупреждение с этим сообщением, как мне это сделать? И еще одна проблема: когда я нажимаю кнопку «Удалить» (в нижней части jqGrid), отображаются окна ajax с вопросом «Вы хотите удалить выбранные элементы?», С вводом «Да» и «Нет». " Вход. Когда я нажимаю «Да», это окно ajax не закрывается!

Спасибо!

Данте

РЕДАКТИРОВАТЬ [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]);

});

person D4nt3    schedule 30.05.2012    source источник


Ответы (2)


Вы должны иметь возможность использовать событие afterSubmit для отображения вашего сообщения. Из документации jqGrid:

после отправки

срабатывает после получения ответа от сервера. Обычно используется для отображения состояния с сервера (например, данные успешно удалены или удаление отменено по причинам на стороне сервера). Получает в качестве параметров данные, возвращенные из запроса, и массив размещенных значений типа id=value1,value2. При использовании это событие должно возвращать массив со следующими элементами [success, message], где success — логическое значение, если true, процесс продолжается, если false, появляется сообщение об ошибке, и вся остальная обработка останавливается.

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

Что касается вашей второй проблемы, я не уверен, почему окно Ajax не закрывается. Отлаживали ли вы код, чтобы увидеть, получаете ли вы ошибку JavaScript в это время? Если нет, вам может понадобиться опубликовать небольшой пример, демонстрирующий проблему.

person Justin Ethier    schedule 30.05.2012
comment
Я читал эту документацию.. Но там нет никаких примеров и, кроме того, они вялые. Посмотрите: должен возвращать массив со следующими элементами [успех, сообщение], где успех является логическим значением и возвращает [успех, сообщение] , они пропустили один s во время возврата функции. Тем не менее, спасибо! А теперь не хватает только второй проблемы. Я не нашел никакой ошибки. Я опубликую код целиком [2]. - person D4nt3; 31.05.2012

Нехорошо использовать HTTP GET для операции удаления. Вы хотите, чтобы предыдущий ответ сервера по тому же URL-адресу кэшировался и не отправлялся на сервер? Значение по умолчанию mtype равно 'POST'. Если у вас есть службы RESTfull на стороне сервера, вам нужно будет использовать mtype: 'DELETE', но использование 'GET' может иметь смысл только для некоторого фиктивного кода, который ничего не удаляет на сервере.

Кроме того, вы используете параметр dataType: 'json', которого нет для delGridRow (см. документацию ). Даже если вы будете использовать ajaxDelOptions: { datyType: "json" }, вы получите ответ сервера (см. ответ Джастина), который не будет автоматически преобразован из JSON в объект. Причина в том, что текущий код delGridRow использует обратный вызов complete вместо обратного вызова success (см. здесь). Поэтому, если вы получите ответ JSON от сервера, вам придется явно вызвать $.parseJSON внутри afterSubmit обратный вызов (см. ответ Джастина).

person Oleg    schedule 30.05.2012
comment
Спасибо за ваше предложение о методе HTTP, но сначала, на мой взгляд, вы должны знать, как закодирован веб-модуль :) однако я использовал запрос GET только для отладки с помощью Firebug :) Я не знал, что Мне нужно разобрать (в jSon) ответ сервера, большое спасибо! Я отредактировал код в своем исходном вопросе [1] - person D4nt3; 31.05.2012
comment
@ D4nt3: Вы можете отлаживать в Firebug любые HTTP-запросы, а не только GET. Чтобы понять проблему, вы можете просто удалить строку в сетке, затем создать ту же строку с тем же идентификатором и удалить строку еще раз. Второй запрос на удаление не будет отправлен в Internet Explorer например на сервер и данные будут удалены только локально. Если вы перезагрузите сетку, вы увидите, что строка на сервере не удалена. Это будет связано с использованием HTTP GET вместо DELETE или POST. Кстати, причиной второй проблемы может быть отсутствие CSS или неправильный порядок файлов JavaScript. - person Oleg; 31.05.2012