Question

我遇到了jqGrid数据网格的问题。我需要使用按钮删除一行或更多行＆＃34;删除＆＃34;。这是我的代码：

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

这段代码发送到＆＃34; url：＆＃34;选项所选行的id / s（它可以工作）。该url以json格式返回响应..这个答案说明操作是否成功。我需要显示带有该消息的警报，我该怎么办？另一个问题是，当我点击＆＃34;删除＆＃34;按钮（在jqGrid的底部），它显示一个带有问题＆＃34的ajax窗口;你想要删除所选的项目吗？＆＃34;，使用＆＃34;是＆＃34;输入和＆＃34;否＆＃34;输入。当我点击＆＃34;是＆＃34;时，这个ajax窗口将不会关闭！

谢谢！

但丁

EDIT [1]＆amp;＆amp; [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的回答）。

jqGrid：如何从“navButtonAdd”和“delGridRow”中删除行？

2 个答案: