Ändern Sie den Stil von jqGrid
Ich bin mit jqGrid 3.5. Kann ich ändern, den Stil und das Aussehen der Netz-und machen es noch schöner mit jQuery oder benutzerdefinierte CSS-oder etwas anderes?
InformationsquelleAutor der Frage Arka Chatterjee | 2009-09-12
Du musst angemeldet sein, um einen Kommentar abzugeben.
Eines der großen features von jqGrid 3.5 ist die integration mit jQuery-UI-Themes. Sie bauen kann und/oder wählen Sie ein Thema aus hier. Dann fügen Sie einfach einen Verweis darauf in Ihre Seite ein:
Dieser erhalten Sie ein raster, das sieht sehr gut aus, mit einem minimum an Aufwand.
Nicht, dass Ihr problem lösen oder Sie benötigen für die überholung des grid-look-and-feel noch mehr?
InformationsquelleAutor der Antwort Justin Ethier
Müssen Sie ändern Sie die grid-header (on-the-fly).
Dies ist mein code
HTML:
Das jqGrid:
Um zu verstehen, auf welches Objekt ich haben, um zu arbeiten, lassen Sie uns untersuchen Sie den HTML-code generiert, indem der JavaScript-code:
...
Nun, das einzige, div mit einer ID angegeben, wird der <div id="gview_jqgrid_ctrs"...
Dass ist der Grund, warum das folgende NICHT FUNKTIONIERT.
Hatte ich zu wählen Sie das übergeordnete div und "Suche in" den header-div, mit der "ui-jqgrid-titlebar" - Klasse angegeben. Dann entfernte ich die original "ui-widget-header" - Klasse und ersetzen mit meiner eigenen Klasse.
Wo .jqgrid-header ist ein Stil, der in dieser Weise definiert.
Habe ich getestet und funktioniert. Hoffe, dass dies nützlich sein wird...
InformationsquelleAutor der Antwort MosLeBrut
Zu erarbeiten, was Justin Ethier sagt...
Seit jqGrid Jquery verwendet-UI-Themen, der beste Weg, um das Aussehen des Gitters wäre, um eine benutzerdefinierte Thema.
Ich würde empfehlen, dass Sie sehen, ob das funktioniert für Sie, bevor Sie versuchen, ändern Sie die css nach der Tat... obwohl Sie das auch tun, wenn die jquery-ui-Thema Blick ist zu eng für Sie.
InformationsquelleAutor der Antwort r00fus
Ich bin sicher, Sie können.
Haben Sie zwei Möglichkeiten:
Können Sie ändern Sie die CSS des Rasters.
Dies ist nützlich, wenn Sie haben, um kleine Veränderung am design.
Die wichtigsten änderungen sollten nicht durchgeführt werden, weil diese Art der JQGrid CSS-Klassen sind wirklich aufeinander angewiesen.
Oder Sie können entfernen Sie alle styling von HTML und ersetzen Sie es mit Ihren eigenen.
Beispielsweise haben Sie ein JQGrid wie:
HTML
jQuery
Dieser wird in HTML wie folgt Aussehen:
Entfernen Sie alle CSS-Klassen:
etc.
Nachdem Sie erstellt haben Ihre eigenen Klassen, die Sie hinzufügen können, um die HTML-Struktur mit:
Schlage ich beide Techniken.
InformationsquelleAutor der Antwort Zoltan Veres
InformationsquelleAutor der Antwort niko.makela
Habe ich css geändert von jQGrid in einer neuen Weise, das wird unterstützt bootastrap design auch. Sie benötigen folgende Dinge um dies zu konfigurieren jQGrid
1) Font Awesome Stil
2) jQGrid Neuesten bundle
Neu gestaltete jQGrid wird wie folgt Aussehen Bild
Neuen full CSS und vollständige javascript-coding enthalten ist http://www.techdoubts.net/2015/11/working-jqgrid-responsive-css-boostrap.html hier.
InformationsquelleAutor der Antwort Biby Augustine
Können Sie entfernen Sie alle ui-grid-Klassen:
Dies kann zu performance-Problemen, wenn Ihr Stromnetz groß ist.
InformationsquelleAutor der Antwort Alireza Fattahi