jqGrid trigger "Cargando ..." superposición

Question

¿Alguien sabe cómo desencadenar la superposición jqGrid stock "Cargando ..." que se muestra cuando se carga la grilla? Sé que puedo usar un plugin jquery sin mucho esfuerzo, pero me gustaría poder mantener la apariencia de mi aplicación en consonancia con la de lo que ya se usa en jqGrid.

El cierre cosa que he encontrado es la siguiente:

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

• N8

Answer 1

Si usted está buscando algo así como DisplayLoadingMessage() función. No existe en jqGrid. Sólo se puede establecer la opción loaduide jqGrid a permitir (por defecto), desactivar o bloquear . Personalmente prefiero bloque. (ver http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options). Pero creo que no es lo que querías.

Lo único que puede hacer, si le gusta el mensaje "Cargando ..." de jqGrid, es hacer la misma. Explicaré aquí lo que hace jqGrid para mostrar este mensaje: Se crearán dos divs ocultos. Si usted tiene una rejilla con id = lista, esta divs se parecerá a lo siguiente:

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

donde el texto "Cargando ..." o "lädt ..." (en alemán) proviene de $.jgrid.defaults.loadtext. Los ids de divs se construirán a partir del prefijo "lui_" o "load_" y la grilla id ("lista"). Antes de enviar una solicitud ajax, jqGrid hace visibles uno o dos de estos divs. Llama a la función jQuery.show() para el segundo div (id = "lista_de_carga") si la opción loadui es habilite. Si loadui opción es bloque, sin embargo, ambos divs (id = "lui_list" y id = "load_list") se mostrarán con respecto a la función .show(). Después del final de la solicitud ajax .hide() se llamará a la función jQuery para uno o dos divs. Es todo.

Encontrará la definición de todas las clases de CSS en ui.jqgrid.css o jquery-ui-1.8.custom.css.

Ahora tiene suficiente información para reproducir el mensaje "Cargando ..." de jqGrid, pero si fuera usted, pensaría una vez más si realmente quiere hacer esto o si el jQuery blockUI plugin es mejor para sus objetivos.

Answer 2

El estilo para sobrescribir es [.ui-jqgrid .loading].

Answer 3

Puede llamar a $ ("# load _"). Show() y .hide() donde está la identificación de su grilla.

Answer 4

utilizo

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

Funciona bien sin crear ninguna nueva divs

Answer 5

que acaba de colocar debajo de la línea de onSelectRow caso de rejilla JQ funcionó.

$ ('. Loading').espectáculo();

Answer 6

es worling con $ ('div.loading'). Show(); Este es también útil incluso otros componentes

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

Como se ha mencionado por @Oleg la tienen un montón de buenas características durante el desarrollo de una base de aplicaciones ajax. Con él se puede bloquear la interfaz de usuario completa o un elemento específico llamado element Block

Para el jqGrid puede poner su red en un div (sampleGrid) y luego bloquear la red como:

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

Answer 8

simple, mostrarlo :

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

Luego de ocultarlo de nuevo

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