Textzeilen in JqGrid umbrechen

Lesezeit: 2 Minuten

Benutzer-Avatar
becherweich

Können Sie Textzeilen zum Umbrechen bekommen? JqGrid? Ich habe mich schon umgeschaut aber nichts gefunden.

Benutzer-Avatar
Justin Ether

Probieren Sie das folgende CSS aus:

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

Dies funktioniert bei mir mit jqGrid 3.6.


Wie N30 betonte, unterstützt jqGrid 4.0 jetzt a cellattr colModel-Option, die eine feinere Kontrolle über den Textumbruch ermöglichen kann. Aus seinem Beispiel:

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

Benutzer-Avatar
N30

Mit jQGrid 4.0 ist es besser, cellattr in colmodel wie folgt zu verwenden:-

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

            .... other columns

            ]

Auf diese Weise können Sie den Umbruchstil auf einzelne Spalten anwenden und müssen nicht !important verwenden

Ich hatte dieses Problem für die Header und stellte fest, dass ich all dies brauchte, um es auch im IE zu beheben. Beachten Sie, dass dies für die Überschriften gilt, nicht für Zellen. Das Problem dabei ist, dass es wahrscheinlich mehr bewirkt, als Sie vielleicht wollen (wie ich sicher später feststellen werde), aber Sie können die CSS-Selektoren immer verfeinern und/oder sie auf den spezifischen #tableIdName oder eine Klasse verweisen lassen, damit Sie dies können Opt-in, wie Sie möchten.

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

Du kannst den … benutzen Klassen colModel-Option, um eine CSS-Klasse in Ihre Spalte einzufügen und dann den Stil in Ihre CSS-Datei einzufügen white-space: normal !important; in dieser klasse…

Klassen

Schnur

Diese Option ermöglicht das Hinzufügen von Klassen zur Spalte. Wenn mehr als eine Klasse verwendet wird, sollte ein Leerzeichen gesetzt werden. Zum Beispiel classes:'class1 class2' wird eine Klasse1 und eine Klasse2 für jede Zelle in dieser Spalte festlegen.

Im Grid-CSS gibt es eine vordefinierte Klasse ui-ellipsis, die es erlaubt, Ellipsen an eine bestimmte Zeile anzuhängen. Auch dies funktioniert in FireFox zu.

1282450cookie-checkTextzeilen in JqGrid umbrechen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy