小编典典

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

ajax

我的网站上有一个jqgrid(版本3.5.3),它是通过对Web服务的Ajax调用获取结果的。查询通常很复杂,加载结果需要花费几秒钟的时间。加载时,用户会看到一个框[Loading
…]。

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

  1. 使网格忘记刚刚请求的数据
  2. 保留先前搜索中已加载的结果

似乎没有内置任何功能,因此我可能正在寻找一些技巧来实现这一目标。

有任何想法吗?


阅读 270

收藏
2020-07-26

共1个答案

小编典典

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

2020-07-26