Jquery 如何将取消按钮添加到jqgrid？

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

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

让网格忘记刚刚请求的数据

保留已从上一次搜索中加载的结果

似乎没有任何内置的东西，所以我可能正在寻找一点黑客来实现这一点

---

有什么想法吗？

通常

$。ajax

请求返回

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”的“Cancel”按钮。我应该提到的是，我还没有测试上面的代码，但我希望它能工作

当然，您应该理解，上面的代码只会中止浏览器在客户端的等待，而服务器上的过程将继续。如果您的服务器将实现服务器端中止，则不需要上面的代码，您可以直接调用此服务器中止方法。
这是我们的解决方案，它与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 = [];
                }

var handleurl=''；
jQuery（文档）.ready（函数（）{
var xhrList=[]；
var beforeSendHandler=函数（）{
var cancelPendingRequests=函数（）{
each（xhrList，function（）{this.abort（）；}）；
xhrList=[]；
返回false；
};
var hideLoadingUI=函数（）{
$（this.hide（）；
$（“#加载列表”）.hide（）；
};
cancelPendingRequests（）；
$（“#加载列表”）.show（）；
//为了确保我们一次只显示一个取消按钮，有些人装腔作势
if（jQuery（“#cancelrequest”）.length==0）{
jQuery（“.UIJQGrid标题栏”）.append（jQuery（“取消”）.click（cancelPendingRequests）。click（HideloadingGUI））；
}否则{
jQuery（“#取消请求”）.show（）；
};  
}
jQuery（“#list”）.jqGrid({
数据类型：函数（postdata）{
GetSearchCriteria（）；//网格筛选所需
var xhr=$.ajax({
//我们重写beforeSend，以便能够访问XHRs，但这意味着我们必须实现默认行为，比如自己显示加载消息
beforeSend:beforeSendHandler，
数据类型：“xml”，
数据：postdata，
成功：函数（xmlDoc）{
//
jQuery（“取消请求”）.hide（）；
$（“#加载列表”）.hide（）；
jQuery（“#list”）[0].addXmlData（xmlDoc）；
xhrList=[]；
}

…
这将不仅仅是“一点小技巧”。您最大的问题是取消对服务器的请求。如果有办法确定请求是否需要很长时间，那么您可以从一开始就阻止长时间请求。无论哪种方式，都需要大量的工作，即使可以取消请求。感谢您的全面回答！我们最终收到了im如果我们在4.5.4版中整理了类似的内容，我可能会发布这样的帖子：myGrid[0].grid.endReq（）；@AlexeyF:答案是差不多4年前写的。自那时以来，jqGrid中有很多变化。
endReq
被移入
myGrid[0].grid.endReq（）
（请参阅jqGrid代码部分）