Как добавить кнопку отмены в мой jqgrid?

Question

У меня на сайте есть jqgrid (версия 3.5.3), который получает результаты от вызова ajax веб-службы.Часто запрос сложен, и для загрузки результата требуется несколько секунд.Во время загрузки пользователь видит окно [Загрузка ...].

В случае, если пользователи понимают, что ищут не ту вещь, клиент попросил добавить кнопку отмены в сетку, что:

1. заставит сетку забыть отолько что запрошенные данные
2. сохраняют результаты, уже загруженные из предыдущего поиска

Кажется, для этого ничего не встроено, поэтому я, вероятно, ищунемного взломать, чтобы достичь этого.

Есть идеи?

Answer 1

В общем случае $.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().Я думаю, что новый метод, такой как abortAjaxRequest в jqGrid, может быть лучшим решением.

Без изменения текущего исходного кода 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.Я должен отметить, что я еще не тестировал приведенный выше код, но надеюсь, что он должен работать.

Вы должны понимать, разумеется, что приведенный выше код прерывает только ожидание браузера на стороне клиента.и процесс на сервере будет продолжен.Если на вашем сервере будет реализована прерывание на стороне сервера, приведенный выше код не понадобится, и вы сможете напрямую вызывать этот метод прерывания работы сервера.

Answer 2

Вот наше решение, которое очень похоже на решение Олега, главное отличие в том, что мы отслеживаем список 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 = [];
                }

...