Colonne WordWrap dans JQGrid

Question

Tout le monde sait comment faire pour envelopper les noms de colonnes dans JQGrid. S'il vous plaît trouver mon code JSON ci-dessous

colModel: [ {name: 'RequestID', index: 'CreditRequest.CreditRequestID', largeur: 100, align: 'left'}, .....

Avec référence au code ci-dessus si la taille du contenu dépasse je veux qu'il soit enveloppé. Remarques ou commentaires

Answer 1

Eh bien la façon la plus simple d'assurer un saut de ligne est de mettre un <BR/> en le nom de la colonne où vous avez besoin d'un saut de ligne. Par exemple ClientPrimaryName peut être écrit comme Client<BR/>PrimaryName, de sorte qu'il rend effectivement que:

client
PrimaryName

Answer 2

Vous pouvez définir une propriété css à espace blanc de th tag sur normal. En utilisant JQuery qui devrait être:

$('.ui-jqgrid .ui-jqgrid-htable th div').css('white-space', 'normal'); 

Answer 3

Vous devez jeter un oeil à des classes spécifiques appliquées à votre jqGrid e-têtes de colonnes. Dans mon cas, j'ai eu les éléments suivants: ui-th-div-ie ui-jqgrid-sortable

En regardant un peu plus loin, je trouvais qu'il y avait deux problèmes CSS:

1. -espace blanc: normal
2. hauteur: 16px

deux ces attributs CSS définis dans ui.jqgrid.css. Se rendant compte que j'avais une exigence spécifique pour cette grille que je ne voulais pas avoir affecter d'autres implémentations Je suis arrivé avec la solution suivante:

$(".ui-jqgrid-sortable").css('white-space', 'normal'); 
$(".ui-jqgrid-sortable").css('height', 'auto'); 

Answer 4

la référence Il suffit de votre propre fichier css.

.ui-jqgrid tr.jqgrow td { 
    height: 50px; 
    white-space: normal; 
} 

Tant que votre fichier css est listé dans l'en-tête après le fichier jqGrid.css alors il remplacer.

Answer 5

Pour ce que ça vaut, ici il est de la ligne d'en-tête:

.ui-jqgrid .ui-jqgrid-htable th div, .ui-jqgrid-sortable { 
    height:auto; 
    overflow:hidden; 
    white-space:normal !important; 
} 

Answer 6

Voici quelques étapes pour permettre de mot dans l'emballage des cellules.

Ouvrir ui.jqgrid.css Rechercher .ui-jqgrid tr.jqgrow td changement « blanc-space: pre; » à « white-space: normal; »

Pour envelopper dans la cellule:

.ui-jqgrid tr.jqgrow td { 
    white-space: normal !important; 
    height:auto; 
    vertical-align:text-top; 
    padding-top:2px; 
} 

Et pour les en-têtes de colonnes

.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; 
} 

Answer 7

Utilisez cette css

.ui-jqgrid tr.jqgrow td { 
     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 
    } 

Answer 8

vous ne pouvez pas simplement mettre un <BR/>, tout cela fonctionne sur la ligne d'emballage - il ne marche pas correctement ajuster la hauteur

Answer 9

Cela a fonctionné avec jqGrid 4.4.4

.ui-jqgrid .ui-jqgrid-htable th div 
{ 
    white-space:normal; 
    height:auto !important; 
}