Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

jquery - How to center the "Loading data . ." message in the visible screen in 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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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:

enter image description here


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...