web-dev-qa-db-fra.com

Habillage des lignes de texte dans JqGrid

Pouvez-vous obtenir des lignes de texte à envelopper dans JqGrid? J'ai jeté un œil mais je ne trouve rien.

javascriptjqueryjqgrid
53
beakersoft

Essayez le CSS suivant:

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

Cela fonctionne pour moi en utilisant jqGrid 3.6.

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

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

Avec jQGrid 4.0, 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 un style d'habillage à une colonne individuelle et ne pas avoir à utiliser! Important

28
N30

J'ai eu ce problème pour les en-têtes et j'ai trouvé que j'avais besoin de tout cela pour le corriger également dans IE. Notez que cela concerne les en-têtes, pas les cellules. Le problème est qu'il affecte probablement plus que vous ne le souhaiteriez (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 afin que vous puissiez adhérez à votre guise.

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

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

des classes

chaîne

Cette option permet d'ajouter des classes à la colonne. Si plusieurs classes seront utilisées, un espace doit être défini. Par exemple classes:'class1 class2' définira une classe1 et une classe2 pour chaque cellule de cette colonne.

Dans la grille css, il y a une classe prédéfinie ui-Ellipsis qui permet d'attacher des Ellipsis à une ligne particulière. Cela fonctionnera également dans FireFox.

0
lmcarreiro