web-dev-qa-db-fra.com

Jquery JQGrid - Comment définir l'alignement des cellules d'en-tête de grille?

Est-il possible d'aligner les en-têtes de colonnes de la grille dans jqgrid? par exemple aligner gauche droite ou centre?

Dans les documents jqrid http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options il dit:

align: Defines the alignment of the cell in the Body layer, not in header cell. 
Possible values: left, center, right.

Notez qu'il dit "pas dans la cellule d'en-tête". Comment puis-je faire cela pour la cellule d'en-tête (cellule de titre de grille)? La documentation omet de mentionner ce petit détail ....

jqueryjqgrid
23
JK.

Le meilleur moyen documenté de modifier l'alignement de l'en-tête de colonne est d'utiliser la méthode setLabel de jqGrid (voir http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods ).

Vous pouvez modifier l'alignement de la colonne identifiée par 'name': 'Name' avec le code suivant:

grid.jqGrid ('setLabel', 'Name', '', {'text-align':'right'});

Avec le code 

grid.jqGrid ('setLabel', 'Name', 'Product Name', {'text-align':'right'},
             {'title':'My ToolTip for the product name column header'});

vous pouvez modifier le nom de l'en-tête en "Nom du produit" et définir "Mon info-bulle pour l'en-tête de colonne du nom du produit" comme info-bulle pour l'en-tête de colonne correspondant.

Vous pouvez également définir certaines classes dans votre CSS et le définir pour les en-têtes de colonne également en respectant la méthode setLabel.

En passant, le nom de la fonction 'setLabel' est choisi parce que vous ne pouvez pas définir le paramètre colNames du jqGrid, mais utilisez l'option 'label' supplémentaire dans la colModel pour définir un en-tête de colonne différent de la valeur 'name'.

UPDATED: Vous pouvez utiliser des classes pour définir 'text-align' ou 'padding'. Essayez juste de suivre

.textalignright { text-align:right !important; }
.textalignleft { text-align:left  !important; }
.textalignright div { padding-right: 5px; }
.textalignleft div { padding-left: 5px; }

et

grid.jqGrid ('setLabel', 'Name', '', 'textalignright');
grid.jqGrid ('setLabel', 'Description', '', 'textalignleft');

(J'ai défini 5px comme étant le remplissage pour obtenir de meilleurs résultats. Vous pouvez choisir la valeur de remplissage que vous trouverez mieux dans votre cas).

23
Oleg

Allez simplement dans votre fichier css de votre jqgrid.

Chercher:

ui-th-column,.ui-jqgrid .ui-jqgrid-htable th.ui-th-column
{overflow:hidden;white-space:nowrap;text-align:center; ...

Et changez le texte-aligner.

Je ne l'ai pas trouvé avec des options régulières.

J'espère que cela t'aidera.

Bruno

6
bruno

S'il vous plaît essayez ceci 

loadBeforeSend: function () {
    $(this).closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable>thead>tr>th").css("text-align", "left");
}
2
Shailesh R

Bien que l'utilisation de la méthode 'setLabel' semble faisable, je veux toujours que mes en-têtes de cellules soient alignés de la même manière que les cellules . Je viens donc d'utiliser cette fonction:

function pimpHeader(gridObj) {
    var cm = gridObj.jqGrid("getGridParam", "colModel");
    for (var i=0;i<cm.length;i++) {
        gridObj.jqGrid('setLabel', cm[i].name, '', 
            {'text-align': (cm[i].align || 'left')}, 
            (cm[i].titletext ? {'title': cm[i].titletext} : {}));
    }
}

Ceci utilise l'alignement des cellules pour aligner l'en-tête . Pour être appelé ainsi:

pimpHeader(jQuery("#grid"));

Si vous le souhaitez, vous pouvez étendre votre modèle de colonne avec 'titletext', qui apparaît sous la forme d'un en-tête d'infobulle, comme suit:

colModel: [{ name: 'name', label: 'Name', align: 'right', titletext: 'Name-Tooltip'}, ...]
1
Stefan

Vous pouvez simplement ajouter l'attribut align à votre colonne dans ColModel:

colModel: [
          {name: 'MyColumn', index: 'MyColumn', align: 'center'}
      ],
0
Mehdi Souregi

voyez la source pour trouver le css auquel votre grille fait référence .__ et vous pourrez ensuite essayer ceci:

setTimeout(function(){
   jQuery('.ui-th-column').css('text-align','center');
},1);
0
user3404584