jqGrid trigger "Loading ..." overlay

Question

Qualcuno sa come attivare la sovrapposizione jqGrid "Caricamento in corso ..." che viene visualizzata quando viene caricata la griglia? So che posso usare un plugin jQuery senza troppi sforzi, ma mi piacerebbe essere in grado di mantenere il look-n-feel della mia applicazione coerente con quello di ciò che è già usato in jqGrid.

Il chiude cosa che ho trovato è questo:

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

• n8

Answer 1

Se siete alla ricerca di qualcosa di simile a DisplayLoadingMessage() funzione. Non esiste in jqGrid. È possibile impostare solo l'loadui possibilità di jqGrid per abilitare (default), disabilitare o blocco. Personalmente preferisco il blocco . (vedi http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options). Ma penso che non sia quello che volevi.

L'unica cosa che puoi fare, se ti piace il messaggio "Caricamento in corso ..." di jqGrid, è quello di fare lo stesso. Spiegherò qui cosa fa jqGrid per visualizzare questo messaggio: verranno create due immersioni nascoste. Se si dispone di una griglia con id = lista, questo div sarà simile seguente:

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

dove il testo "Caricamento ..." o "lädt ..." (in tedesco) viene da $.jgrid.defaults.loadtext. Gli ID di div saranno costruiti dal prefisso "lui_" o "load_" e dalla griglia id ("elenco"). Prima di inviare una richiesta jaxGrid rende visibili una o due di queste div. Chiama la funzione jQuery.show() per il secondo div (id = "elenco_carico") se l'opzione loadui è abilita. Se l'opzione loadui è il blocco, tuttavia, entrambe le div (id = "lui_list" e id = "lista_pista") verranno visualizzate con riferimento alla funzione .show(). Dopo la fine della richiesta Ajax .hide(), la funzione jQuery sarà chiamata per uno o due div. È tutto

Troverete la definizione di tutte le classi css in ui.jqgrid.css o jquery-ui-1.8.custom.css.

Ora hai abbastanza informazioni per riprodurre il messaggio "Caricamento in corso ..." di jqGrid, ma se fossi in te, ci penserei ancora una volta se vuoi davvero farlo o se lo jQuery blockUI plugin è meglio per i tuoi obiettivi.

Answer 2

Lo stile da sovrascrivere è [.ui-jqgrid .loading].

Answer 3

Puoi chiamare $ ("# load _"). Show() e .hide() dove è l'id della tua griglia.

Answer 4

Io uso

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

Funziona bene senza creare nuovi div

Answer 5

ho appena messo sotto la linea in onSelectRow caso di griglia JQ ha funzionato.

$ ('. Caricamento').mostrare();

Answer 6

è preoccupante con $ ('div.loading'). Show(); Questo è anche utile anche altri componenti

$('#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

Come detto da @Oleg il hanno un sacco di buone caratteristiche durante lo sviluppo di un applicazioni di banche ajax. Con esso è possibile bloccare tutta la UI o un elemento specifico chiamato element Block

Per il jqGrid si può mettere la griglia in un div (sampleGrid) e quindi bloccare la griglia come:

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

Answer 8

semplice, per mostrarlo :

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

Poi per nascondere di nuovo

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