如何向我的 jqgrid 添加取消按钮？答案

【问题标题】：How do I add a cancel button to my jqgrid?如何向我的 jqgrid 添加取消按钮？
【发布时间】：2010-10-25 16:14:24
【问题描述】：

我的网站上有一个 jqgrid（版本 3.5.3），它通过对 Web 服务的 ajax 调用获取结果。通常查询很复杂，加载结果需要几秒钟。在加载时，用户会看到一个框 [Loading...]。

如果用户意识到他们正在搜索错误的东西，客户端会要求在网格中添加一个取消按钮，这将：

让网格忘记它刚刚请求的数据
保留上一次搜索已加载的结果

似乎没有为此内置任何东西，所以我可能正在寻找一些技巧来实现这一点。

有什么想法吗？

【问题讨论】：

这不仅仅是“一点点小技巧”。您最大的问题是取消对服务器的请求。如果有某种方法可以确定请求是否会花费很长时间，那么您可能能够阻止长请求开始。无论哪种方式，这都是很多工作，即使可以取消请求。

标签： jquery ajax jqgrid

【解决方案1】：

一般$.ajax 请求返回具有abort 方法的XMLHttpRequest 对象。因此，如果$.ajax 的相应调用将具有以下形式

var lastXhr = $.ajax ({
    // parameters
    success:function(data,st) {
       // do something
       lastXhr = null;
    },
    error:function(xhr,st,err){
        // do something
       lastXhr = null;
    }
});

我们将可以访问lastXhr 有价值的信息，然后我们就可以致电lastXhr.abort()。我认为在 jqGrid 中像abortAjaxRequest 这样的新方法可能是最好的解决方案。

在不改变 jqGrid 的当前源代码的情况下，解决方案可能如下所示

var lastXhr;
var stopAjaxRequest(myGrid) {
    $('#cancel').attr('disabled', true);  // disable "Cancel" button
    lastXhr = null;
    myGrid[0].endReq();
};
var grid = $("#list");
grid.jqGrid ({
    // all standard options
    loadComplete() {
        stopAjaxRequest(grid);
    },
    loadError() {
        stopAjaxRequest(grid);
    },
    loadBeforeSend (xhr) {
        l$('#cancel').attr('disabled', false); // enable "Cancel" button
        lastXhr = xhr;
    }
});

$("#cancel").click(function() {
    if (lastXhr) {
        lastXhr.abort();
    }
});

我想在代码中，我们在 jqGrid 之外有一个 id="cancel" 的“取消”按钮。我应该提一下，我还没有测试上面的代码，但我希望它应该可以工作。

您应该明白，上面的代码只是中止了客户端浏览器的等待，而服务器上的进程将继续进行。如果你的服务器要实现服务端aborting，那么上面的代码就不需要了，你可以直接调用这个server aborting方法。

【讨论】：

感谢您的全面回答！我们最终实现了类似的东西，我可能会在整理后发布它
在 4.5.4 版本中 endReq() 被称为：myGrid[0].grid.endReq();
@AlexeyF：答案大约是 4 年前写的。自那时以来，jqGrid 发生了很多变化。 endReq 移入myGrid[0].grid.endReq()（见jqGrid 代码的the lines）

【解决方案2】：

这是我们的解决方案，与 Oleg 的非常相似，主要区别在于我们跟踪 XHR 列表以确保我们清理所有请求

var handlerUrl = '';

jQuery(document).ready(function() {
    var xhrList = [];

    var beforeSendHandler = function() {

        var cancelPendingRequests = function() {
            jQuery.each(xhrList, function() { this.abort(); });
            xhrList = [];
            return false;
        };

        var hideLoadingUI = function() {
            $(this).hide();
            $("#load_list").hide();
        };

        cancelPendingRequests();

        $("#load_list").show();

// some faffing around to ensure we only show one cancel button at a time
        if (jQuery("#cancelrequest").length == 0) {
            jQuery(".ui-jqgrid-titlebar").append(jQuery("<button   id='cancelrequest'>Cancel</button>").click(cancelPendingRequests).click(hideLoadingUI));
        } else {
            jQuery("#cancelrequest").show();
        };  
    }


    jQuery("#list").jqGrid({
        datatype: function(postdata) {

            GetSearchCriteria(); //needed for the grid's filtering

            var xhr = $.ajax({
                //we override the beforeSend so we can get at the XHRs, but this means we have to implement the default behaviour, like showing the loading message ourselves
                beforeSend: beforeSendHandler,
                dataType: "xml",
                data: postdata,
                success: function(xmlDoc) {
                    //
                    jQuery("#cancelrequest").hide();
                    $("#load_list").hide();
                    jQuery("#list")[0].addXmlData(xmlDoc);
                    xhrList = [];
                }

...

【讨论】：