würde Ich mag Font Super-Symbole verwenden:jqGrid Pager Area - Mit Font Super Icons
<i class="icon-edit"></i>
im jqGrid Pager Bereich anstelle der physischen Bilder standardmäßig.
.navButtonAdd('#vw_ComplaintSearchGridPager', { caption: '', buttonicon: 'ui-icon-disk', title: 'Save Grid Settings', onClickButton: function() { $(this).SaveGridSetting(); } })
Weiß jemand, wie man das erreicht?
Es ist sehr interessante Frage! Ich habe nie zuvor Font Awesome icons verwendet, aber es scheint sehr interessantes Projekt.
jqGrid hat derzeit keine direkte Unterstützung von Font Awesome-Symbolen, aber ich habe the simple demo vorbereitet, die zeigt, wie die Standard-jQuery UI-Navigator-Symbole durch die entsprechenden Symbole aus Font Awesome ersetzt werden.
Man sieht meist den Unterschied zu den ursprünglichen Navigator Icons nach dem Zoom der Seite. Ich schloss unter dem Navigator mit Zoom 400% angezeigt:
Der ursprüngliche Navigator mit jQuery UI-Icons
Das Navigationssystem mit Font Super Symbole:
Der Code, Ich benutze ist sehr einfach. Statt Verwendung
$grid.jqGrid("navGrid", "#pager", {view: true});
benutzte ich
$grid.jqGrid("navGrid", "#pager", {editicon: "icon-pencil",
addicon: "icon-plus", delicon: "icon-trash", searchicon: "icon-search",
refreshicon: "icon-refresh", viewicon: "icon-file",view: true});
$("#pager .navtable .ui-pg-div>span").removeClass("ui-icon");
Ich habe die CSS
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span { margin: 0 5px; font-size: 12px; }
Ich denke, es ist möglich, mehr jQuery UI-Symbole ersetzen Super Icons Font, aber es ist nicht sehr einfach . Ich werde über das Problem mehr nachdenken und werde den Entwickler von jqGrid (Tony Tomov) kontaktieren, um jqGrid freundlicher zu Font Awesome Icons zu machen, so dass es sehr einfach möglich wäre, auf Font Awesome Icons umzusteigen.
AKTUALISIERT: Ich habe den Code, der oben ermöglicht mehr Symbole aus dem Pager ersetzen:
var $pager = $grid.closest(".ui-jqgrid").find(".ui-pg-table");
$pager.find(".ui-pg-button>span.ui-icon-seek-first")
.removeClass("ui-icon ui-icon-seek-first")
.addClass("icon-step-backward");
$pager.find(".ui-pg-button>span.ui-icon-seek-prev")
.removeClass("ui-icon ui-icon-seek-prev")
.addClass("icon-backward");
$pager.find(".ui-pg-button>span.ui-icon-seek-next")
.removeClass("ui-icon ui-icon-seek-next")
.addClass("icon-forward");
$pager.find(".ui-pg-button>span.ui-icon-seek-end")
.removeClass("ui-icon ui-icon-seek-end")
.addClass("icon-step-forward");
Als Ergebnis einer der folgenden Pager erhalten:
statt
AKTUALISIERT 2: Der Code zum Ändern des Minimierungssymbols sieht etwas komplizierter aus.Man sollte zuerst das Symbol ändern zunächst
$grid.closest(".ui-jqgrid")
.find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>.ui-icon-circle-triangle-n")
.removeClass("ui-icon ui-icon-circle-triangle-n")
.addClass("icon-circle-arrow-down");
und dann nach jeder auf das Symbol klicken ändern:
onHeaderClick: function (gridstate) {
if (gridstate === "visible") {
$(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span")
.removeClass("icon-circle-arrow-up ui-icon-circle-triangle-n")
.addClass("icon-circle-arrow-down");
} else if (gridstate === "hidden") {
$(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span")
.removeClass("icon-circle-arrow-down ui-icon-circle-triangle-s")
.addClass("icon-circle-arrow-up");
}
}
Zusätzlich braucht man, um die CSS
.ui-jqgrid .ui-jqgrid-titlebar-close>span { margin: 0 3px; font-size: 16px; }
.ui-jqgrid .ui-jqgrid-titlebar-close { text-decoration: none; }
die Sortierung hinzufügen zu beheben Symbole Ich habe den Code verwendet
var $sortables = $grid.closest(".ui-jqgrid")
.find(".ui-jqgrid-htable .ui-jqgrid-labels .ui-jqgrid-sortable span.s-ico");
$sortables.find(">span.ui-icon-triangle-1-s")
.removeClass("ui-icon ui-icon-triangle-1-s")
.addClass("icon-sort-down");
$sortables.find(">span.ui-icon-triangle-1-n")
.removeClass("ui-icon ui-icon-triangle-1-n")
.addClass("icon-sort-up");
und die CSS
.ui-jqgrid .ui-icon-asc { height: auto; margin-top: 0; }
.ui-jqgrid .ui-icon-asc, .ui-jqgrid .ui-icon-desc {
height: auto; margin-top: 0; margin-left: 5px;
}
.ui-jqgrid .s-ico>.ui-state-disabled, .s-ico>.ui-state-disabled { padding: 0; }
Als Ergebnis man folgendes erhalten wird:
AKTUALISIERT 3: In the next demo man kann mehr vollwertiger Ersatz von jQuery UI-Icons finden Ehrfürchtig Font Symbole.
AKTUALISIERT 4: The answer bietet Lösung für Font Awesome Version 4.x.
Mit Blick auf die Antwort von Oleg oben habe ich Folgendes getan, um die Dinge zu vereinfachen. Zusätzliche CSS
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span.fntawsm { margin: 0 5px; font-size: 12px; padding-left:2px;padding-right:2px;}
** padding-left: 2px; padding-right: 2px; optional ist und das funktioniert nur mit Symbolen nur ohne Beschriftung ...
Und dann starten Sie einfach fontawesome Symbole in navButtonAdd wie
caption:"", // important for above
title:"Give any",
buttonicon:"fntawsm icon-remove"
buttonicon:"fntawsm icon-eject icon-rotate-90"
Hinzufügen etc .. können Sie alle zusätzliche Funktionalität von fontawesome verwenden wie icon-rotiere-XX auch. Thisway ich musste nicht ui-icon-Klasse aus Spannen entfernen.
Dargestellt würde ich eine CSS alternative Antwort für die Interessenten setzen. Einer unserer Entwickler hat eine JS-Option implementiert, die funktional funktioniert hat, aber es gab eine Verzögerung bevor es richtig gerendert wurde (nicht ideal).
Wir haben font-awesome Icons für unsere Paging-Optionen verwendet, und hier haben wir es implementiert.
gefunden, die vier Klassen, die jqGrid für die Paging-Icons wurden mit uns folgenden CSS anpassen und erstellt gewünschten Basis Schriftart ehrfürchtige Arten anwenden
.ui-icon-seek-next, .ui-icon-seek-prev, .ui-icon-seek-end, .ui-icon-seek-first
{
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
Dann ist es nur eine Frage des die content von Schrift Grabbing - Familiensymbol und benutze sie als dein eigenes.
.ui-icon-seek-next:before
{
content: "\f105";
}
.ui-icon-seek-prev:before
{
content: "\f104";
}
.ui-icon-seek-end:before
{
content: "\f101";
}
.ui-icon-seek-first:before
{
content: "\f100";
}
So ist die gesamte CSS zusammen wie diese Antwort
.ui-icon-seek-next, .ui-icon-seek-prev, .ui-icon-seek-end, .ui-icon-seek-first
{
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.ui-icon-seek-next:before
{
content: "\f105";
}
.ui-icon-seek-prev:before
{
content: "\f104";
}
.ui-icon-seek-end:before
{
content: "\f101";
}
.ui-icon-seek-first:before
{
content: "\f100";
}
und die Ausgabe auf unser Netz ohne JS und ohne Verzögerung 
So sauber :) danke. – nmdias
Inspiriert von @afreeland sieht, habe ich ein CSS verfügbar auf github, mit dem Sie Ihre Icons in Font-Awesome Icons konvertieren können.
Der Leistungsvorteil von diesem über die jQuery-Methode, die @Oleg beschrieb, ist meiner Meinung nach wichtig. Es ist auch eine sehr elegante Lösung meiner Meinung nach.
Sie sind herzlich eingeladen, es zu benutzen: https://github.com/guylando/ToAF
Hinweis: Sie müssen Priorität für diese ToAF.css Datei Arten über Ihre anderen Symbole Arten geben, damit kann durch Kopieren der CSS-Inhalte in einen Tag, zum Beispiel dadurch erreicht werden, dein Dokument.
tolle Antwort, vielen Dank wie immer! –
@PaulBrown: Gern geschehen! Ich habe [die Feature-Anfrage] (http://www.trirand.com/blog/?page_id=393/feature-request/support-of-font-awesome-icons-in-jqgrid/#p27916) zu trirand gepostet. – Oleg
@PaulBrown: In ** AKTUALISIERTER 3 ** Teil meiner Antwort habe ich den Font Awesome Icons einen vollständigen Ersatz der jQuery UI Icons hinzugefügt. – Oleg