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'; ?>'
        });
    }
});

此代码的 sn-p 将所选行的 id/s 发送到“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]);

});

Answer 1

您应该能够使用afterSubmit 事件来显示您的消息。来自jqGrid documentation：

提交后

从服务器收到响应后触发。通常用于显示来自服务器的状态（例如，数据已成功删除或由于服务器端原因而取消删除）。接收从请求返回的数据和 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（请参阅贾斯汀的回答）。