2013-11-15 6 views
7

Mein ultimatives Ziel ist es, dass jqgrid die Spaltenbreite automatisch entsprechend dem Dateninhalt einstellt. Als Teil des Weges dorthin muss ich die Spaltenbreite einstellen können, NACHDEM die Daten geladen sind, zu welcher Zeit ich die maximale Breite jeder Spalte kennen würde. Aber sobald ich die maximale Breite einer Spalte weiß, wie kann ich die Breite jeder Spalte im "loadComplete" -Ereignis einstellen und das Gitter mit der neuen Breite jeder Spalte aktualisieren lassen? Die meisten Posts, die ich im Internet gefunden habe, beziehen sich auf die Gesamtbreite des Rasters. Ich möchte die Breite jeder einzelnen Spalte festlegen und die horizontale Bildlaufleiste wird automatisch angezeigt, wenn die Gesamtbreite zu lang ist.Wie wird die Spaltenbreite von jqgrid NACH dem Laden der Daten angepasst?

Update: Nachdem ich Olegs geniales Demo gesehen habe, habe ich das im dqGrid (4.5.4) selbst programmiert. Hier ist, was ich getan habe:

Suchen Sie die Funktion

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

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

dann kurz vor dem Ende lokalisieren} dieser Funktion, fügen Sie folgendes

 // 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 an den Inhalt an. Eine Sache, auf die ich noch Hilfe brauche, ist, wie man die neue Breite richtig berechnen kann. Meine aktuelle fest codierte Berechnung

var newWidth = v.length * 6;

ist offensichtlich nicht sehr skalierbar.

+0

Es wäre gut, wenn Sie auf Ihre Fragen antworten (http://meta.stackexchange.com/a/5235/147495). – Oleg

Antwort

17

Kurze Antwort auf Ihre Frage könnte sein: jqGrid bieten keine Methode, die Spaltenbreite ändern kann, nachdem Gitter erstellt haben. In solchen Fällen erinnere ich gut bekannten Aphorismus Kozma Prutkov: "Wer verhindert, dass Sie Schießpulver wasserdicht erfinden?". Es bedeutet Folgendes: Wenn etwas nicht existiert, kann es immer noch erfunden werden. Also habe ich eine solche Methode basierend auf der in the answer vorgeschlagenen Lösung geschrieben, wo ich vorgeschlagen habe, die interne Methode dragEnd aufzurufen, um die Spalte des Gitters zu verändern.

The demo demonstrieren die Verwendung neuer Methode. Die Demo ermöglicht eine Spalte des Rasters zu wählen und dann die Breite auf den neuen Wert zu ändern, die Sie an:

enter image description here

Der Code der neuen Methode, die Sie unter

$.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 finden Fügen Sie die Methode in Ihr Projekt ein und verwenden Sie dann die Methode setColWidth. Der erste Parameter der Methode ist entweder der Spaltenindex oder der Spaltenname. Der zweite Parameter ist eine Zahl, die einen neuen Wert für die Breite der Spalte angibt. Der dritte Parameter ist optional. Wenn es nicht angegeben wird, wird die Breite des Rasters automatisch der Änderung der Spaltenbreite angepasst. Das Raster wird also keine Bildlaufleisten haben, wenn es nicht vorher die Spaltenbreite geändert hat. Wenn Sie die ursprüngliche Gitterbreite beibehalten möchten, geben Sie false als dritten Parameter der Methode setColWidth an.

AKTUALISIERT: Die neueste (aktualisiert) Version von setColWidth aus github heruntergeladen werden.Die neue kostenlose Version von jqGrid, die derzeit here entwickelt, enthält die Methode wie im Basismodul von jqGrid. Also, wenn Sie jquery.jqGrid.min.js, jquery.jqGrid.min.map und jquery.jqGrid.src.js von hier verwenden, dann brauchen Sie nicht jQuery.jqGrid.autoWidthColumns.js mit setColWidth als Plugin.

2 AKTUALISIERT: ich den obigen Code die neueste Version von setColWidth, die ich github veröffentlicht entspricht modifiziert.

aktualisiert 3: Verfahren setColWidth wird in free jqGrid Gabel jqGrid enthalten, die ich seit Ende 2014 entwickeln Es viele andere neue Funktionen wie Verlängerung der Breite der Spalte basierend auf der Breite des Inhalts der umfasst Säule. Weitere Details finden Sie unter the wiki article.

+0

Danke für die coole Demo. Siehe mein "Update" zu dem, was ich getan habe. Irgendeine Idee, wie man die genaue Breite in Pixeln berechnet, die ich zurückgeben sollte? – dreamfly

+0

@dreamfly: Gern geschehen! Ich finde "update" etwas seltsam. Zuallererst ist es ** neue Frage ** (das Original war "Wie justiere ich die Spaltenbreite von jqGrid NACH dem Laden der Daten?"). Sekunden Ich empfehle nicht, Quellcode von jqGrid zu ändern, wenn es wirklich benötigt wird. Stattdessen können Sie 'loadComplete' oder' beforeProcessing' verwenden. Jetzt zu Ihrer Hauptfrage: Ich denke, dass Sie Zellinhalt innerhalb ' ...' wickeln können. Danach können Sie 'jQuery.width' verwenden, um die exakte Breite in Pixel von jedem '' und so von jedem Text in der Zelle zu berechnen. Schließlich können Sie 'setColWidth' verwenden. – Oleg

+0

Mir ist der Fehler bekannt, den Quellcode zu ändern. Dies ist nur ein Beweis für das Konzept, wie schwierig es ist, dies meiner Meinung nach ein ziemlich einfaches, aber sehr nützliches Feature zu implementieren. besonders die einfache HTML-Tabelle macht das nativ. Natürlich wurde auch eine Effizienz erzielt, ohne die Daten erneut zu verarbeiten. – dreamfly

Verwandte Themen