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

问题描述

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

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的基本代码会很好(确切地说是修改beginReq 函数)以使上述Loading ..." div 的位置始终发生变化.

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.

已更新:更改正在加载..." 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:演示 展示这个想法.我在 outside of loadComplate 中包含代码只是为了演示目的，以展示它是如何工作的.在演示中，正在加载" 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屋！