I find your question is good. The same issue could have other users of jqGrid.
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.
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'
});
}
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.
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'
});
The code should be placed in the loadBeforeSend
as before.
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:
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…