Déclencheur jqGrid "Chargement en cours ..." superposition

Question

Est-ce que quelqu'un sait comment déclencher le recouvrement jqGrid "Chargement ..." stocké qui s'affiche lors du chargement de la grille? Je sais que je peux utiliser un plugin jquery sans trop d'efforts, mais j'aimerais pouvoir garder l'apparence de mon application cohérente avec celle de jqGrid.

La ferme chose que j'ai trouvé est la suivante:

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

• n8

Answer 1

Si vous recherchez quelque chose comme DisplayLoadingMessage() fonction. Il n'existe pas dans jqGrid. Vous ne pouvez régler la loadui option jqGrid pour activer (par défaut), désactiver ou bloc. Personnellement, je préfère bloc. (Voir http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options). Mais je pense que ce n'est pas ce que tu voulais. La seule chose que vous pouvez faire, si vous aimez le message "Chargement ..." de jqGrid, est de faire le même. Je vais expliquer ici ce que fait jqGrid pour afficher ce message: Deux divs cachés seront créés. Si vous avez une grille avec id = liste, ce divs ressemblera à ce qui suit:

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

où le texte « Chargement ... » ou « ... Lädt » (en allemand) vient de $.jgrid.defaults.loadtext. Les identifiants de divs seront construits à partir du préfixe "lui_" ou "load_" et de l'identifiant de grille ("list"). Avant d'envoyer une requête ajax, jqGrid rend visible un ou deux de ces divs. Il appelle jQuery.show() fonction pour la deuxième div (id = "load_list") si l'option loadui est activer. Si loadui option est bloc, cependant, les deux divs (id = "lui_list" et id = "load_list") seront affichés en ce qui concerne .show() fonction. Après la fin de la requête ajax .hide(), la fonction jQuery sera appelée pour un ou deux divs. C'est tout.

Vous trouverez la définition de toutes les classes CSS dans ui.jqgrid.css ou jquery-ui-1.8.custom.css.

Maintenant vous avez assez d'informations pour reproduire jqGrid "Loading ..." message, mais si j'étais vous je pense encore une fois si vous voulez vraiment faire cela ou si le jQuery blockUI plugin est meilleur pour vos objectifs.

Answer 2

Le style à remplacer est [.ui-jqgrid .loading].

Answer 3

Vous pouvez appeler $ ("# load _"). Show() et .hide() où est l'ID de votre grille.

Answer 4

J'utilise

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

Il fonctionne très bien sans créer de nouveaux divs

Answer 5

Je viens de mettre en ligne ci-dessous onSelectRow événement de la grille JQ il a travaillé.

$ ('chargement').montrer();

Answer 6

son travail avec $ ('div.loading'). Show(); Ce est même d'autres composants utiles

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

Comme mentionné par le @Oleg ont beaucoup de bonnes caractéristiques lors de l'élaboration d'une applications de base ajax. Avec elle, vous pouvez bloquer l'interface utilisateur tout ou un élément spécifique element Block

Pour le jqGrid vous pouvez mettre votre grille dans un div (sampleGrid), puis bloquer la grille comme:

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

Answer 8

simple, pour le montrer :

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

ensuite de le cacher à nouveau

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