如何将“加载数据”居中。 ”。” jqgrid 树形网格中可见屏幕中的消息？

Question

我有一个 jqGrid 树形网格，约有 40 列，因此有一个大的水平滚动条（取决于浏览器的大小）。问题是由于宽度太大，当页面加载或我执行过滤器等时，您看不到弹出窗口“正在加载消息......”因为它位于屏幕右侧。

有什么办法可以让“正在加载数据..”当前可见屏幕中的消息中心（而不是整个页面？

Answer 1

我发现你的问题问得很好。 jqGrid 的其他用户也可能遇到同样的问题。

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

如果您更改 loadBeforeSend 内的“Loading ...”div 的位置，您可以获得更好的结果：

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 函数）以使上述“正在加载...”div 的位置始终发生变化。

更新：更改“Loading ...”div 位置的更好实现可能是

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 中。

更新2：演示演示了主意。我在外部 loadComplate 中添加了代码，仅用于演示目的，以展示其工作原理。在演示中，“正在加载”div 保持可见，并且我还额外显示了使用 loadui: 'block' 选项时显示的覆盖层：

Answer 2

将加载消息的容器放置在固定位置，顶部和左侧分配到 40%-60% 左右。这会修复

它应该是这样的：

.loading-message-container {
     position : fixed;
     top:50%;
     left: 45%;
}