jqGrid trigger "Loading ..." Überlagerung

Question

Kann jemand das Lager jqGrid "Loading ..." Overlay auslösen, das angezeigt wird, wenn das Raster geladen wird? Ich weiß, dass ich ein jquery-Plugin ohne viel Aufwand verwenden kann, aber ich möchte in der Lage sein, das Look-n-Feel meiner Anwendung konsistent zu dem zu halten, was bereits in jqGrid verwendet wird.

Das schließt, was ich gefunden habe, ist dies:

jqGrid display default "loading" message when updating a table/on custom update

• n8

Answer 1

Wenn Sie so etwas wie DisplayLoadingMessage() Funktion suchen. Es existiert nicht in jqGrid. Sie können nur dann eingestellt, die loadui Option von jqGrid zu ermöglichen (Standard), disable oder Block. Ich persönlich bevorzuge Block. (siehe http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options). Aber ich denke, es ist nicht das, was du wolltest.

Die einzige Sache, die Sie tun können, wenn Sie die "Loading ..." Nachricht von jqGrid mögen, ist das gleiche zu machen. Ich werde hier erklären, was jqGrid tut, um diese Nachricht anzuzeigen: Zwei versteckte divs werden erstellt. Wenn Sie ein Raster mit id = Liste haben, wird sich diese divs wie folgt vor:

<div style="display: none" id="lui_list" 
    class="ui-widget-overlay jqgrid-overlay"></div> 
<div style="display: none" id="load_list" 
    class="loading ui-state-default ui-state-active">Loading...</div> 

, wo der Text "Loading ..." oder "... Lädt" (in deutscher Sprache) von $.jgrid.defaults.loadtext kommt. Die IDs von divs werden aus dem Präfix "lui_" oder "load_" und der Grid-ID ("list") erstellt. Bevor eine AJAX-Anfrage gesendet wird, macht jqGrid ein oder zwei dieser divs sichtbar. Es ruft jQuery.show() Funktion für das zweite div (ID = "load_list"), wenn loadui Option ist aktivieren. Wenn loadui Option Block ist, dann werden beide divs (id = "lui_list" und id = "load_list") in Bezug auf .show() Funktion angezeigt. Nach dem Ende der AJAX-Anforderung wird die 0QjQuery-Funktion für eine oder zwei Divs aufgerufen. Es ist alles.

Die Definition aller css-Klassen finden Sie in ui.jqgrid.css oder jquery-ui-1.8.custom.css.

Jetzt haben Sie genug Informationen zu reproduzieren jqGrid "Loading ..." Nachricht, aber wenn ich Sie wäre, würde ich noch einmal überlegen, ob Sie das wirklich tun wollen oder ob die jQuery blockUI plugin ist besser für Ihre Ziele.

Answer 2

Der zu überschreibende Stil ist [.ui-jqgrid .loading].

Answer 3

Sie können $ ("# load _"). Show() und .hide() aufrufen wo ist die ID Ihres Rasters.

Answer 4

Ich benutze

 $('.loading').show(); 
     $('.loading').hide(); 

Es funktioniert gut, ohne neuen divs zu schaffen

Answer 5

ich gerade in unterhalb der Linie platziert onSelectRow Fall JQ Raster hat es funktioniert.

$ ('. Loading').Show();

Answer 6

es ist worling mit $ ('div.loading'). Show(); Dies ist auch nützlich, auch andere Komponenten

$('#editDiv').dialog({ 
      modal : true, 
      width : 'auto', 
      height : 'auto', 
      buttons : { 
       Ok : function() { 
        //Call Action to read wo and 
        **$('div.loading').show();** 

        var status = call(...) 
        if(status){ 
         $.ajax({ 
          type : "POST", 
          url : "./test", 
          data : { 
           ... 
          }, 
          async : false, 
          success : function(data) { 

           retVal = true; 
          }, 
          error : function(xhr, status) { 


           retVal = false; 
          } 
         }); 
        } 
        if (retVal == true) { 
         retVal = true; 
         $(this).dialog('close'); 
        } 
        **$('div.loading').hide();** 
       }, 
       Cancel : function() { 
        retVal = false; 
        $(this).dialog('close'); 
       } 

      } 
     }); 

Answer 7

Wie @Oleg erwähnt die haben viele gute Eigenschaften bei einer Ajax-Basis-Anwendungen zu entwickeln. Mit ihm können Sie ganze UI blockieren oder ein bestimmtes Element element Block

Für die jqGrid genannt können Sie Ihr Gitter in einem div (sampleGrid) und dann blockieren die Gitter wie gesagt:

$.extend($.jgrid.defaults, { 
    ajaxGridOptions : { 
     beforeSend: function(xhr) { 
      $("#sampleGrid").block(); 
     }, 
     complete: function(xhr) { 
      $("#sampleGrid").unblock(); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
      $("#sampleGrid").unblock(); 
     } 
    } 
}); 

Answer 8

einfach, es zu zeigen, :

$("#myGrid").closest(".ui-jqgrid").find('.loading').show(); 

es dann wieder

$("#myGrid").closest(".ui-jqgrid").find('.loading').hide();