如何添加取消按鈕到我的jqgrid？

Question

我的網站上有一個jqgrid（版本3.5.3），它從ajax調用Web服務的結果。通常查詢很複雜，加載結果需要幾秒鐘的時間。當它加載時，用戶看到一個框[正在加載...]。

如果用戶意識到，他們正在尋找錯誤的東西，客戶端已要求添加一個取消按鈕到電網，這將：

1. 使電網忘掉它只是請求的數據
2. 保留以前搜索已加載的結果

似乎沒有要建在這樣的東西，所以我可能尋找一個黑客位來實現這一點。

任何想法？

Answer 1

這是我們的解決方案，這是非常相似的奧列格的，主要的區別是，我們跟蹤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 = []; 
       } 

...

Answer 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(); 
    } 
}); 

在我想的代碼，我們有一個「取消」按鈕，用id =「取消」 jqGrid的外。我應該提到，我還沒有測試過上面的代碼，但我希望它能夠工作。

您應該理解上述代碼僅會中止客戶端瀏覽器的等待，並且服務器上的進程將繼續進行。如果您的服務器將實現服務器端中止，那麼上面的代碼將不再需要，您將能夠直接調用此服務器中止方法。