Wie implementieren Sie wordwrap auf jqGrid die arbeiten auf IE7, IE8 und FF

Gewusst wie: implementieren Sie wordwrap auf jqGrid die arbeiten auf IE7, IE8 und FF, wobei er auch Spalte-die Größe der Arbeit (raster ausrichtet richtig).

Versucht innerwrap Inhalt auf jeder td eine div von bestimmten Breite (basierend auf der anfänglichen TH Breite), aber colresize nicht auf die divs habe ich eingefügt. jqGrid berechnet die Breite des verkleinerten TH und angrenzenden THs obwohl.

Gibt es eine bessere Lösung, die alle meiden, die JavaScript 'hacks'?

InformationsquelleAutor bcm | 2010-06-08
  1. 19

    jqGrid Text/Zeilenumbruch erklärt, wie dies zu tun, verwenden Sie die folgende CSS:

    .ui-jqgrid tr.jqgrow td {
 white-space: normal !important;
 height:auto;
 vertical-align:text-top;
 padding-top:2px;
}
    • +1: sehr gute und übersichtliche Lösung. Ich schlage vor, nur zu verwenden title:false im ColModel für alle Spalten ausschalten, tooltips, die nicht mehr benötigt werden. Man spart ein wenig Speicher. Außerdem andere Nutzung vertical-align als text-top für alle Zellen in der Tabelle können Sie wahrscheinlich auch interessant.
    • champs!!! gute Antwort + Tipp.
    • schließlich entfernt vertical-align:text-top, wie es verursacht wurde und die unterstreichen das styling der Anker in Spalten mit überlauf versteckte Inhalte, um überlauf im IE. (nur die Unterstreichung overflows!)
    InformationsquelleAutor Justin Ethier
  2. 1

    Diese css verwendet, dies wird sicherlich helfen.

       .ui-jqgrid tr.jqgrow td {
        word-wrap: break-word; /* IE 5.5+ and CSS3 */
        white-space: pre-wrap; /* CSS3 */
        white-space: normal !important; /* 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
    }
    InformationsquelleAutor Yasser
  3. -1

    Deall Alle,

    diese können, wie unten:

     $("#jqxgrid").jqxGrid(

            {
                source: dataAdapter,
                width: 1500,
                autorowheight: true,
                autoheight: true,
                columnsresize: true,
                theme: 'ui-redmond',
    InformationsquelleAutor user3729495
Schreibe einen Kommentar