如何在我的jqgrid中添加取消按钮?

时间:2010-10-25 16:14:25

标签: jquery ajax jqgrid

我的网站上有一个jqgrid(版本3.5.3),它从ajax调用Web服务获得结果。查询通常很复杂,加载结果需要几秒钟。在加载时,用户会看到一个方框[正在加载...]。

如果用户意识到他们正在搜索错误的内容,客户端已要求向网格添加取消按钮,这将是:

  1. 让网格忘记刚才要求的数据
  2. 保留已从上一次搜索中加载的结果
  3. 似乎没有内置任何东西,所以我可能正在寻找一些黑客来实现这一目标。

    有什么想法吗?

2 个答案:

答案 0 :(得分:2)

通常$.ajax请求返回具有XMLHttpRequest方法的abort对象。因此,如果$.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”的“取消”按钮。我应该提一下,我还没有测试上面的代码,但我希望它能够运行。

您应该理解,上面的代码只会中止客户端浏览器的等待,并且服务器上的进程将继续。如果您的服务器将实现服务器端中止,那么将不需要上面的代码,您将能够直接调用此服务器中止方法。

答案 1 :(得分:0)

这是我们的解决方案,与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 = [];
                }

...