Wie passt man die Spaltenbreite von jqgrid an, NACHDEM die Daten geladen wurden?

Lesezeit: 6 Minuten

Wie passt man die Spaltenbreite von jqgrid an NACHDEM die
Traumfliege

Mein ultimatives Ziel ist es, dass jqgrid die Spaltenbreite automatisch entsprechend dem Dateninhalt einstellt. Als Teil des Pfades dorthin muss ich in der Lage sein, die Spaltenbreite festzulegen, NACHDEM die Daten geladen wurden, bis zu welchem ​​Zeitpunkt ich die maximale Breite jeder Spalte kennen würde. Aber wenn ich die maximale Breite einer Spalte kenne, wie kann ich die Breite jeder Spalte im Ereignis “loadComplete” festlegen und das Raster mit der neuen Breite jeder Spalte aktualisieren lassen? Die meisten Beiträge, die ich im Netz gefunden habe, beziehen sich auf die Gesamtbreite des Gitters. Was ich möchte, ist, die Breite jeder einzelnen Spalte festzulegen und die horizontale Bildlaufleiste automatisch erscheinen zu lassen, wenn die Gesamtbreite zu lang ist.

Aktualisieren: Nachdem ich Olegs großartige Demo gesehen hatte, habe ich es letztendlich in dqGrid (4.5.4) selbst codiert. Folgendes habe ich getan:

Suchen Sie die Funktion

addJSONData = function(data,t, rcnt, more, adjust) {

Suchen Sie dann innerhalb dieser Funktion

            for (j=0;j<rowReader.length;j++) {
                v = $.jgrid.getAccessor(cur,rowReader[j]);
                rd[ts.p.colModel[j+gi+si+ni].name] = v;
                rowData.push(addCell(idr, v, j + gi + si + ni, i + rcnt, cur, rd));

                // my addtion: stores the largest header size
                var newWidth = v.length * 6; 
                if (ts.grid.headers[j].width < newWidth) {
                    ts.grid.headers[j].width = newWidth;
                }
            }

Fügen Sie dann direkt vor dem Ende } dieser Funktion Folgendes hinzu

        // my addition: invoke the resizing logic
        for (j = 0; j < rowReader.length; j++) {
            ts.grid.resizing = { idx: j };
            ts.grid.dragEnd();
        }

Danach passt das Raster die Breite jeder Spalte entsprechend dem Inhalt an. Eine Sache, bei der ich noch Hilfe brauche, ist die Berechnung der neuen Breite. Meine aktuelle hartcodierte Berechnung

var neueBreite = v.länge * 6;

ist offensichtlich nicht sehr skalierbar.

  • Es wäre gut, wenn du damit anfängst “akzeptieren” Antworten auf Ihre Fragen.

    – Oleg

    25. August 15 um 14:46 Uhr

Wie passt man die Spaltenbreite von jqgrid an NACHDEM die
Oleg

Eine kurze Antwort auf Ihre Frage könnte lauten: jqGrid bietet keine Methode, mit der die Spaltenbreite nach dem Erstellen des Gitters geändert werden kann. In solchen Fällen erinnere ich an bekannte Aphorismen Kosma Prutkow: “Wer hindert Sie daran, Schießpulver wasserdicht zu erfinden?”. Es bedeutet etwa folgendes: Was es nicht gibt, kann immer noch erfunden werden. Also habe ich eine solche Methode basierend auf der in der Antwort vorgeschlagenen Lösung geschrieben, in der ich vorgeschlagen habe, die interne Methode aufzurufen dragEnd um die Größe der Spalte des Rasters zu ändern.

Die Demo demonstrieren die Verwendung der neuen Methode. Die Demo ermöglicht es, eine Spalte des Rasters auszuwählen und dann die Breite auf einen neuen Wert zu ändern, den Sie angeben:

Geben Sie hier die Bildbeschreibung ein

Den Code der neuen Methode finden Sie unten

$.jgrid.extend({
    setColWidth: function (iCol, newWidth, adjustGridWidth) {
        return this.each(function () {
            var $self = $(this), grid = this.grid, p = this.p, colName, colModel = p.colModel, i, nCol;
            if (typeof iCol === "string") {
                // the first parametrer is column name instead of index
                colName = iCol;
                for (i = 0, nCol = colModel.length; i < nCol; i++) {
                    if (colModel[i].name === colName) {
                        iCol = i;
                        break;
                    }
                }
                if (i >= nCol) {
                    return; // error: non-existing column name specified as the first parameter
                }
            } else if (typeof iCol !== "number") {
                return; // error: wrong parameters
            }
            grid.resizing = { idx: iCol };
            grid.headers[iCol].newWidth = newWidth;
            grid.newWidth = p.tblwidth + newWidth - grid.headers[iCol].width;
            grid.dragEnd();   // adjust column width
            if (adjustGridWidth !== false) {
                $self.jqGrid("setGridWidth", grid.newWidth, false); // adjust grid width too
            }
        });
    }
});

Sie können die Methode in Ihr Projekt einbinden und dann verwenden setColWidth Methode. Der erste Parameter der Methode ist entweder der Spaltenindex oder der Spaltenname. Der zweite Parameter ist eine Zahl, die den neuen Wert der Breite der Spalte angibt. Der dritte Parameter ist optional. Wenn es nicht angegeben ist, wird die Breite des Rasters automatisch entsprechend der Änderung der Spaltenbreite angepasst. Das Raster hat also keine Bildlaufleisten, wenn dies vor dem Ändern der Spaltenbreite nicht der Fall ist. Wenn Sie die ursprüngliche Gitterbreite beibehalten möchten, sollten Sie dies angeben false als dritter Parameter von setColWidth Methode.

AKTUALISIERT: Die neueste (aktualisierte) Version von setColWidth kann von heruntergeladen werden github. Das neue kostenlos Version von jqGrid, die derzeit entwickelt wird Hier beinhaltet die Methode wie im Basismodul von jqGrid. Also, wenn Sie verwenden jquery.jqGrid.min.js, jquery.jqGrid.min.map und jquery.jqGrid.src.js von hier aus brauchen Sie dann nicht einzuschließen jQuery.jqGrid.autoWidthColumns.js mit setColWidth als Plugin.

AKTUALISIERT 2: Ich habe den obigen Code so geändert, dass er der neuesten Version von entspricht setColWidth zu denen ich veröffentlicht habe github.

AKTUALISIERT 3: Die Methode setColWidth ist darin enthalten kostenloses jqGrid Fork von jqGrid, das ich seit Ende 2014 entwickle. Es enthält viele andere neue Funktionen, wie z. B. das Erweitern der Breite der Spalte basierend auf der Breite des Inhalts der Spalte. Sehen der Wiki-Artikel für mehr Details.

  • Danke für die coole Demo. Siehe mein “Update” darüber, was ich letztendlich getan habe. Irgendeine Idee, wie ich die genaue Breite in Pixel berechnen kann, die ich zurückgeben sollte?

    – Traumfliege

    19. November 13 um 1:33 Uhr

  • @dreamfly: Gern geschehen! Ich finde “Update” etwas seltsam. Zunächst einmal ist es neue Frage (Das Original war “Wie passt man die Spaltenbreite von jqGrid an, nachdem die Daten geladen wurden?”). Zweitens empfehle ich nicht, den Quellcode von jqGrid zu ändern, wenn es wirklich erforderlich ist. Stattdessen können Sie verwenden loadComplete oder beforeProcessing. Nun zu Ihrer Hauptfrage: Ich denke, dass Sie Zellinhalte in einpacken können <span>...</span>. Danach können Sie verwenden jQuery.width um die genaue Breite in Pixel von jedem zu berechnen <span> und so von jedem Text in der Zelle. Endlich können Sie verwenden setColWidth.

    – Oleg

    19. November 13 um 6:02 Uhr

  • Ich bin mir der Gefahr bewusst, den Quellcode zu ändern. Dies ist nur ein Proof of Concept, wie schwierig es ist, dieses meiner Meinung nach ziemlich einfache, aber sehr nützliche Feature zu implementieren. besonders die einfache HTML-Tabelle macht das nativ. Effizienz wurde natürlich auch ohne erneute Aufbereitung der Daten erreicht.

    – Traumfliege

    19. November 13 um 19:31 Uhr

  • Es kam voller Zyklus! Ich habe gerade das kostenlose jqgrid mit dem {autoResizable: true } für jede Spalte ausprobiert und es hat funktioniert. Allerdings ist die Leistung auf IE11 mit nur 500 Zeilen und 13 Datenspalten eher langsam. Es scheint, dass es die autoResize-Logik bei jeder Bildlaufaktion ausführt.

    – Traumfliege

    7. Dezember 15 um 21:46 Uhr

  • @traumfliege. Könntest du sorgen die demo welches nutzt nicht minimiert die neuste version von jGrid kostenlos? Versuchen die demo und doppelklicken Sie zwischen den Spaltenüberschriften. Außerdem verstehe ich nicht ganz, warum Sie 500 Zeilen verwenden möchten ohne Paging? Der Monitor kann keine 500 Zeilen darstellen (maximal wahrscheinlich 35). Auf diese Weise reduzieren Sie die Leistung des Netzes um das 100-fache oder mehr. die demo mit 40000 Zeilen funktioniert schnell.

    – Oleg

    7. Dezember 15 um 21:57 Uhr

.

784740cookie-checkWie passt man die Spaltenbreite von jqgrid an, NACHDEM die Daten geladen wurden?

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

Privacy policy