如何添加一个取消按钮,我jqGrid的? [英] How do I add a cancel button to my jqgrid?
问题描述
我有我的网站上它会从一个Web服务调用Ajax其结果jqGrid的(3.5.3版本)。经常查询是复杂,它需要几秒钟的加载结果。虽然它加载的是用户将看到一个对话框[载入中...]。
I've got a jqgrid (version 3.5.3) on my site which gets its results from an ajax call to a web service. Often the query is complicated and it takes a few seconds to load the result. While it is loading the user sees a box [Loading...].
在情况下,用户意识到,他们正在寻找错误的东西,客户已经要求添加一个取消按钮到电网,这将:
In case the users realise they're searching for the wrong thing, the client has asked to add a cancel button to the grid, which would:
- 请电网忘掉它只是要求的数据
- 在保留的结果已经由previous搜索下载
似乎没有被任何内置了这一点,所以我可能寻找一个黑客位来实现这一点。
There doesn't seem to be anything built in for this, so I'm probably looking for a bit of a hack to achieve this.
任何想法?
推荐答案
下面是我们的解决方案,这是非常相似,奥列格的,主要的区别是,我们跟踪XHRs的清单,以确保我们清理所有的请求了
Here's our solution, which is very similar to Oleg's, the main difference is that we keep track of a list of XHRs to make sure we clean all requests up
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 = [];
}
...
这篇关于如何添加一个取消按钮,我jqGrid的?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!