Les cellules de bas de page jqGrid "héritent" CSS des cellules de la grille principale

Question

J'ai un pied de page dans mon jqGrid où je résume les valeurs dans certaines des colonnes. Je définis le pied de page en utilisant la fonction 'footerData' lorsque la grille a terminé le chargement. Cela nécessite que la propriété 'footerrow' dans les options de grille soit définie sur 'true'. Certaines des colonnes que je ne résume pas ont CSS appliqué à eux (pour montrer certaines icônes dans les cellules), qui est défini en utilisant la propriété 'classes' dans l'API colModel. Le problème est que ces classes CSS sont également appliquées aux cellules du footerrow. Je ne veux pas qu'ils soient appliqués là, mais je ne sais pas comment les empêcher d'être montrés. J'ai essayé d'utiliser jQuery pour supprimer la propriété 'class' des éléments td après avoir appelé la fonction 'footerData'. Le problème est que pendant le chargement de la grille, les icônes sont affichées à l'utilisateur. Comment puis-je empêcher l'application du CSS en premier lieu?

Answer 1

En ce qui concerne des Developer Tools de IE8 ou Firebug dans Firefox, vous pouvez examiner la structure de div « s et d'autres tables après la création d'un jqGrid. Il y a div avec la classe "ui-jqgrid-view". Il a l'enfant div « s avec les classes suivantes:

• "ui-jqGrid-titlebar" - barre de titre
• "ui-jqGrid-HdIV" - en-têtes avec colonne textes (en-tête)
• "ui-jqGrid-BDIV" - les informations principales (corps)
• "ui-jqGrid-Sdiv" - ce que vos besoins

Si votre jqGrid a id = "liste", puis jQuery('#list')[0].parentNode.parentNode.parentNode - est la vue principale du réseau div (parents de tous les éléments jqGrid HTML) comme un élément DOM:

var gviewNode = jQuery('#list')[0].parentNode.parentNode.parentNode; 
var hdiv = jQuery(".ui-jqgrid-hdiv", gviewNode); 
var bdiv = jQuery(".ui-jqgrid-bdiv", gviewNode); 
var sdiv = jQuery(".ui-jqgrid-sdiv", gviewNode); 

plus tard, la structure du Sdiv est comme suit:

<div class="ui-jqgrid-sdiv"> 
    <div class="ui-jqgrid-hbox"> 
     <table class="ui-jqgrid-ftable" > 
      <tbody> 
       <tr class="ui-widget-content footrow footrow-ltr"> 
        <td class="ui-state-default jqgrid-rownum">&nbsp;</td> 
        <td>&nbsp;</td> 
        <td>bla bla</td> 
        <td>&nbsp;</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

vous modifier les propriétés CSS du pied de page en ce qui concerne l'o ne des façons:

1. Inclure dans votre CSS un élément avec descripteur comme « tr.footrow td » et définir tout ce dont vous avez besoin
2. classe Changer dynamiquement en utilisant l'anatomie de jqGrid que j'ai décrit ci-dessus.

Je vous recommande d'utiliser la deuxième façon que si vous parvenez pas à utiliser la première, parce que vous devez trouver un bon endroit (probablement l'événement gridComplete) pour effectuer les modifications. Si vous essayez de le faire au mauvais endroit, vos modifications ne fonctionneront pas ou vous devrez corriger la hauteur ou la largeur de certains composants jqGrid (voir Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog)

Cordialement et heureux codage!