在搜索之前和之后使用JQgrid来搜索加载对话框

Question

我使用的jqgrid有很多数据，由于筛选时间太长，我想在搜索前显示一个对话框，并在搜索后关闭它。

发生在我身上的事情是，当我在调试模式下运行过滤器时，我会看到打开和关闭对话框的方法在搜索之前和搜索之后被调用，但当我运行过滤器而没有中断时，我看不到对话框，我的过滤器会等待10秒或更长时间来刷新表，但对话框不会显示。

这是一个同步问题吗？或者为什么我的对话框没有出现？

这是我的代码：

jQuery("#mytable").jqGrid('filterToolbar',{
        searchOnEnter : false,
        stringResult : true,
        defaultSearch:'cn', 
        beforeSearch: openDialogLoading, 
        afterSearch: closeDialogLoading
    }
);  

function openDialogLoading(){
    $( "#DialogLoading" ).dialog({
            resizable: false,
            autoOpen: false,
            height: 110,
            width: 50,
            title: 'Loading...',
            modal: true,
            bgiframe: true
    });
    $( "#DialogLoading" ).dialog('open');   
}

function closeDialogLoading(){
    if ($( "#DialogLoading" ).dialog('isOpen')) {
        $( "#DialogLoading" ).dialog('close');
    }    
}

感谢

Answer 1

了解网格的详细信息（您使用的选项）非常重要。使用本地分页对于大量的行具有良好的性能是很重要的。我为你创建了一些你可以尝试的演示，以及加载/排序/过滤的时间：

• demo1使用13列、400行和页面大小20
• demo2使用13列、400行和页面大小400（没有本地寻呼）
• demo3使用13列、4000行和页面大小20
• demo4使用13列、40000行和页面大小20
• demo5使用13列、1000行和页面大小1000（没有本地寻呼）

你可以看到网格的性能很大程度上取决于页面大小。使用JSFiddle演示，您可以使用不同的列、行和页面大小值玩更多游戏http://jsfiddle.net/OlegKi/1rmmyeLh/我使用的地方

rowNum: 20

更新：演示http://jsfiddle.net/1rmmyeLh/7/您稍后在评论中发布了一些重要问题。修改代码以显示带有任何信息的"Loading"gif实际上很容易，请参阅http://jsfiddle.net/OlegKi/1rmmyeLh/8/.

我在loadComplete中包含了对closeDialogLoading();的调用，并修改了beforeSearch，使其返回true而不是false，这阻止了jqGrid重新加载网格。另外，我手动触发setTimeout内部的reloadGrid：

.jqGrid("filterToolbar", {
    beforeSearch: function () {
        var $self = $(this);
        openDialogLoading();
        setTimeout(function () {
            $self.jqGrid("setGridParam", { search: true })
                .trigger("reloadGrid", [{ page: 1 }]);
        }, 0);
        startTime = new Date();
        measureTime = true;
        return true; // SKIP filtering
    }
})

代码的这种修改解决了显示"Loading"div的问题。另一方面，我仍然认为，您的主要问题是使用数据的本地分页（rowNum选项）。

我想强调的是，在我看来，最好让应用程序快速显示一些"加载"按摩，并保持应用程序缓慢。您在演示rowNum: 4000中使用了4000行数据。另一方面，我只能在显示器上看到大约35行数据。如果我只是将rowNum从4000更改为30，我看到性能将提高大约20倍！！！现在你应该明确你的优先事项。人们可以长篇大论非常愚蠢的用户难以理解寻呼机按钮的含义，但在我看来，20次的性能差异使任何讨论都变得不必要。实际上，每个用户都已经使用了具有寻呼机的应用程序。因此，我强烈建议您使用本地数据分页。您将能够使用更大数据集的样式（请参阅40000行和页面大小为20的演示，这一职责在IE11中是400行和无页面演示的3倍多）。