web-dev-qa-db-fra.com

Comment encapsuler le texte d'en-tête d'une seule colonne en plusieurs lignes dans jqgrid

Si le texte d'étiquette de colonne est plus large que la largeur de colonne, le texte d'étiquette est tronqué. L'augmentation de la largeur des colonnes n'est pas agréable car certains textes sont longs. Comment rendre le texte à Word en plusieurs lignes? La hauteur de l'en-tête doit être déterminée par la hauteur maximale de la colonne.

La seule solution que j'ai trouvée est

jQgrid: plusieurs en-têtes de ligne de colonne

mais cela n'implémente pas l'habillage de texte Word.

Comment implémenter l'habillage Word du texte d'en-tête?

Mise à jour. J'ai essayé les styles Oleg pour le caractère et l'habillage Word.

Enveloppement de personnage

    th.ui-th-column div{
Word-wrap: break-Word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    height: auto;
    vertical-align: middle;
    padding-top: 3px;
    padding-bottom: 3px

}

montre seulement la moitié de la deuxième ligne. La troisième ligne ne s'affiche pas du tout:

Character wrap does not show third line

Retour à la ligne

  th.ui-th-column div{
   white-space:normal !important;
   height:auto !important;
   padding:2px;
   }

désactive le redimensionnement des colonnes pour les colonnes encapsulées. Sur ces colonnes, le déplacement de l'icône de la souris vers le curseur de la souris du séparateur de colonnes ne se transforme pas en dimensionneur. Les colonnes enveloppées ne peuvent pas être redimensionnées.

Comment résoudre ces problèmes?

Mise à jour 2

J'ai essayé l'habillage des caractères (dernier échantillon dans la réponse Oleg). J'ai trouvé des problèmes si la largeur de colonne est diminuée de sorte que plus de lignes apparaissent dans l'en-tête:

  1. La colonne ne peut pas être redimensionnée si vous faites glisser en bas du séparateur de colonne: la hauteur du redimensionneur n'est pas augmentée lors du redimensionnement.

  2. Dans IE9, l'augmentation de la hauteur d'en-tête n'est pas suffisante: la dernière ligne d'en-tête n'est pas visible après le redimensionnement. Dans fireFox, ce problème ne se produit pas.

jquery-uijqgrid
31
Andrus

Dans votre exemple avec l'habillage de caractères, vous avez oublié d'utiliser !important après le height: auto réglage.

Je suis d'accord que le problème avec le resizer de colonne existe vraiment dans ma démo du my ancienne réponse . Je l'ai donc amélioré. De plus, j'essaie de décrire dans quelles situations il peut être important d'utiliser le retour à la ligne au lieu du retour à la ligne.

La nouvelle démo avec l'habillage Word est ici . le code est le suivant:

var grid = $("#list"), headerRow, rowHight, resizeSpanHeight;

grid.jqGrid({
    ...
});

// get the header row which contains
headerRow = grid.closest("div.ui-jqgrid-view")
    .find("table.ui-jqgrid-htable>thead>tr.ui-jqgrid-labels");

// increase the height of the resizing span
resizeSpanHeight = 'height: ' + headerRow.height() +
    'px !important; cursor: col-resize;';
headerRow.find("span.ui-jqgrid-resize").each(function () {
    this.style.cssText = resizeSpanHeight;
});

// set position of the dive with the column header text to the middle
rowHight = headerRow.height();
headerRow.find("div.ui-jqgrid-sortable").each(function () {
    var ts = $(this);
    ts.css('top', (rowHight - ts.outerHeight()) / 2 + 'px');
});

Il utilise le CSS suivant

th.ui-th-column div {
    white-space: normal !important;
    height: auto !important;
    padding: 2px;
}

et produire l'image suivante

enter image description here

(J'ai inclus <br/> après chaque caractère de la première colonne pour que le texte "Inv No" soit placé sur plusieurs lignes).

Tout a l'air très bien, mais il peut y avoir des situations où vous pouvez un mot très long dans l'en-tête de la colonne. Certaines langues comme l'allemand construisent parfois des mots longs comme "Softwareberetstellungsform" qui se composent de plusieurs mots. Dans l'exemple, il s'agissait de "Software", "bereitstellung" et "form". Dans d'autres langues, la même situation est également possible, mais pas si fréquente. En conséquence, on recevra l'image suivante (moins parfaite) (voir la démo ici ):

enter image description here

Vous pouvez voir que les textes "AmountInEUR", "TaxInEUR" et "TotalInEUR" sont coupés. On peut soit inclure des freins de ligne manuels (<br/>) dans le texte de la colonne ou utilisez l'habillage des caractères que j'ai décrit dans la réponse . Si nous modifions uniquement le CSS décrit ci-dessus pour th.ui-th-column div aux éléments suivants

th.ui-th-column div {
    Word-wrap: break-Word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    height: auto !important;
    vertical-align: middle;
}

nous recevrons les résultats suivants (voir la démo ici )

enter image description here

D'ailleurs, le retour à la ligne fonctionne dans certains navigateurs comme Google Chrome comme retour à la ligne Word (!!!) si le texte contient des espaces. Donc la démo sera affiché dans Google Chrome, Safari, Opera, Firefox comme dans l'image ci-dessus avec l'habillage Word, mais la même démo dans IE (IE9 inclus)) sera considérée comme

enter image description here

Donc, aucun moyen n'est absolument parfait, mais l'habillage des caractères présente certains avantages pour tous les navigateurs Web modernes à l'exception d'Internet Explorer (version <10). L'utilisation de <br/> à l'intérieur du texte de la colonne ou l'utilisation de CSS qui dépendent du navigateur Web actuellement utilisé peut améliorer la solution.

37
Oleg
<style type="text/css">
    .ui-jqgrid .ui-jqgrid-htable th div
    {
        height: auto;
        overflow: hidden;
        padding-right: 4px;
        padding-top: 2px;
        position: relative;
        vertical-align: text-top;
        white-space: normal !important;
    }
</style>
19
d.Siva
Following code wraps row data

.ui-jqgrid tr.jqgrow td
    {           
        Word-wrap: break-Word; /* IE 5.5+ and CSS3 */
        white-space: pre-wrap; /* CSS3 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        white-space: normal !important;
        height: auto;
        vertical-align: text-top;
        padding-top: 2px;
        padding-bottom: 3px;
    }

Following code wraps table header data    
    .ui-jqgrid .ui-jqgrid-htable th div
        {
          Word-wrap: break-Word; /* IE 5.5+ and CSS3 */
        white-space: pre-wrap; /* CSS3 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        white-space: normal !important;
        height: auto;
        vertical-align: text-top;
        padding-top: 2px;
        padding-bottom: 3px;
        }
3
shalini