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

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

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

1. 让网格忘记它刚才要求的数据
2. 保留已从上一次搜索加载的结果

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

有任何想法吗？

Answer 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() 。 我认为像abortAjaxRequest中的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”的“取消”按钮。 我应该提一下，我还没有测试过上面的代码，但我希望它能够运行。

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

Answer 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("Cancel").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 = []; } 

…