jqGrid Pager-Bereich - Mit Font Awesome Icons

Es ist sehr interessante Frage! Ich habe nie Schriftart Awesome icons vor, aber es scheint sehr Interessantes Projekt.

jqGrid hat derzeit keine direkte Unterstützung von Font Awesome-icons, aber ich hab die einfache demo die zeigt, wie Sie ersetzen die standard-jQuery-UI-navigator-Symbole mit den entsprechenden icons von Font Awesome.

Kann man sehen, meist klar, der Unterschied zu den original navigator-Symbole nach dem Zoomen der Seite. Ich unterhalb der navigator angezeigt, mit zoom 400%:

Den original navigator using jQuery UI icons

Den navigator mit Font Awesome icons:

Den code, die ich verwendet habe, ist sehr einfach. Anstelle der Verwendung

$grid.jqGrid("navGrid", "#pager", {view: true});

Ich verwendet

$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");

Habe ich den CSS -

.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span { margin: 0 5px; font-size: 12px; }

Ich denke, es ist möglich, zu ersetzen jQuery-UI-icons Font Awesome icons, aber es ist nicht sehr einfach. Ich denke über das problem mehr und nimmt Kontakt mit dem Entwickler von jqGrid (Tony Tomov) zu berücksichtigen, um jqGrid freundlich, Schrift Genial icons, so dass es möglich sein könnte, sehr einfaches Umschalten auf Font-Awesome icons.

AKTUALISIERT: ich habe den code Hinzugefügt, die ermöglicht top-ersetzen Sie Symbole aus der pager:

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 erhält man die folgende pager:

statt

AKTUALISIERT 2: Der code für die änderung minimieren-Symbol sieht ein wenig completer. Man sollte als erstes verändert sich das Symbol 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 ändern Sie es nach jedem klicken auf das Symbol:

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 zum hinzufügen von CSS -

.ui-jqgrid .ui-jqgrid-titlebar-close>span { margin: 0 3px; font-size: 16px; }
.ui-jqgrid .ui-jqgrid-titlebar-close { text-decoration: none; }

Fixieren Sie die Symbole für die Sortierung verwendete ich den code

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 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 erhalten Sie die folgende:

AKTUALISIERT 3: In die nächste demo kann man mehr vollständigen Ersatz von jQuery UI icons Font Awesome icons.

AKTUALISIERT 4: Die Antwort bietet die Lösung für Font-Awesome version 4.x.

Durch den Blick auf die Antwort von Oleg oben, ich habe die folgenden Dinge 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; ist optional
Und das funktioniert nur mit nur Symbole ohne Beschriftung ...

Und nur dann beginnen hinzufügen von fontawesome Symbole in navButtonAdd wie

caption:"", //important for above
title:"Give any",
buttonicon:"fntawsm icon-remove"
buttonicon:"fntawsm icon-eject icon-rotate-90"

etc .., die Sie alle extra Funktionen von font-awesome wie Symbol-drehen-XX zu.
Thisway ich did ' NT haben, zu entfernen ui-icon-Klasse aus erstreckt.