2009-11-13 4 views

Répondre

54

Essayez le CSS suivant:

.ui-jqgrid tr.jqgrow td { 
     white-space: normal !important; 
    } 

Cela fonctionne pour moi en utilisant jqGrid 3.6.


Comme N30 a souligné, jqGrid 4.0 prend désormais en charge une option colModel cellattr qui peut permettre un grain plus fin de contrôle sur l'habillage du texte. De son exemple:

cellattr: function (rowId, tv, rawObject, cm, rdata) { 
    return 'style="white-space: normal;"'; 
} 
27

Avec 4,0 jqGrid, une meilleure façon de le faire est d'utiliser cellattr dans colmodel comme ceci: -

colModel: [ 
      { name: 'ClientName', label: 'Client', index: 'ClientName', width: 150, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' } }, 

      .... other columns 

      ] 

De cette façon, vous pouvez appliquer le style d'emballage à la colonne individuelle et je n'ai pas besoin d'utiliser! important

4

J'ai eu ce problème pour les en-têtes et j'ai trouvé que j'avais besoin de tout cela pour le réparer aussi dans IE. Notez que c'est pour les en-têtes, pas pour les cellules. Le problème avec ceci est probablement plus d'effets que vous voudrez (comme je suis sûr que je le découvrirai plus tard) mais vous pouvez toujours affiner les sélecteurs css et/ou les faire référencer le #tableIdName spécifique ou une classe pour que vous puissiez opt-in comme vous s'il vous plaît.

.ui-jqgrid .ui-jqgrid-htable th div { 
overflow: visible !important; 
height: auto !important; 
} 

.ui-th-column, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column { 
    white-space: normal !important; 
} 

.ui-jqgrid .ui-th-div-ie{ 
    white-space: normal !important; 
} 
0

Vous pouvez utiliser l'option classes de colModel mettre une classe CSS sur votre colonne, puis mettre dans votre fichier CSS du style white-space: normal !important; sur cette classe ...

cours

chaîne

Cette option permet d'ajouter des classes à la colonne. Si plus d'une classe sera utilisée, un espace doit être défini. Par l'exemple classes:'class1 class2' définira un class1 et class2 à chaque cellule sur cette colonne.

Dans la grille css, il existe une classe ui-ellipse prédéfinie qui permet d'attacher des ellipses à une ligne particulière. Cela fonctionnera aussi dans FireFox.