如何居中“加载数据". ". jqgrid treegrid的可见屏幕中显示消息? [英] How to center the "Loading data . ." message in the visible screen in jqgrid treegrid?

问题描述

我有一个约40列的jqGrid treegrid，所以有一个很大的水平滚动条(取决于浏览器的大小).问题是，由于宽度太大，当页面加载或我执行过滤器等操作时，您不会看到弹出窗口"Loading message.".因为它位于屏幕右侧.

I have a jqGrid treegrid with about 40 columns so there is a large horizontal scroll bar (depending on the size of the browser). The issue is since the width is so large, when the page loads or i do a filter, etc, you don't see the popup "Loading message . ." because its off to the right of the screen.

有什么方法可以获取正在加载数据".当前可见屏幕上的消息中心(而不是整个页面?

Is there any way to have the "Loading Data. ." message center in the current visible screen (instead of the page as a whole?

推荐答案

我发现您的问题很好.相同的问题可能还有jqGrid的其他用户.

I find your question is good. The same issue could have other users of jqGrid.

我个人更喜欢使用loadui: 'block'设置，该设置显示在网格加载期间整个网格上的覆盖.在这种情况下，问题就不会那么重要了.

I personally prefer to use loadui: 'block' setting which shows the overlay over the whole grid during the grid loading. In the case the problem will be not so important.

如果更改loadBeforeSend中的"Loading ..." div的位置，则可以获得更好的结果:

You can get better results if you change the position of the "Loading ..." div inside of the loadBeforeSend:

loadBeforeSend: function () {
    var $loadingDiv = $("#load_"+$.jgrid.jqID(this.id)),
        $bdiv = $(this).closest('.ui-jqgrid-bdiv');
    $loadingDiv.show().css({
        top: (Math.min($bdiv.height(), $(window).height()) - $loadingDiv.height())/2 + 'px',
        left: (Math.min($bdiv.width(), $(window).width()) - $loadingDiv.width())/2 + 'px'
    });
}

在我看来，最好修改jqGrid的基本代码(准确地修改

In my opining it would be good to modify the base code of jqGrid (to be exactly to modify the code of beginReq function) to have the described above changing of the position of the "Loading ..." div always.

已更新:可能更好地实现更改"Loading ..." div位置的方法

UPDATED: Probably the better implementation of the changing the position of the "Loading ..." div will be

var gridIdAsSelector = $.jgrid.jqID(this.id),
    $loadingDiv = $("#load_" + gridIdAsSelector),
    $gbox = $("#gbox_" + gridIdAsSelector);
$loadingDiv.show().css({
    top: (Math.min($gbox.height(), $(window).height()) - $loadingDiv.outerHeight())/2 + 'px',
    left: (Math.min($gbox.width(), $(window).width()) - $loadingDiv.outerWidth())/2 + 'px'
});

应像以前一样将代码放置在loadBeforeSend中.

The code should be placed in the loadBeforeSend as before.

更新2 :演示演示这个想法.我包括了代码 loadComplate之外，仅用于演示目的，以显示其工作方式.在演示中，"Loading" div保持可见，另外显示了在使用loadui: 'block'选项的情况下显示的叠加层:

UPDATED 2: The demo demonstrate the idea. I included the code outside of loadComplate only for demonstration purpose to show how it will work. In the demo the "Loading" div stay visible and I show additionally the overlay displayed in case of usage of loadui: 'block' option:

这篇关于如何居中“加载数据". ". jqgrid treegrid的可见屏幕中显示消息?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！