Wie ändern Sie die Spaltensortiersymbole für ein jqgrid?

Question

Ich muss die Standard-Sortier-Symbole für die jqgrid ändern. Momentan wird für jede Spalte ein Pfeil nach oben und unten angezeigt. Wie kann ich es durch ein einzelnes Symbol ersetzen, das sich beim Klicken ändert?

Grundsätzlich sollte das Symbol zwischen aufsteigend, absteigend und unsortiert wechseln.

---

Lösung

Oleg Antwort Mit änderte ich die Doppelpfeilsymbole Standard eine einzelne rote nach oben oder Pfeil nach unten sein, wenn sortiert schaltet.

The jqGrid wird in einem mit einem divsearchclass gewickelt.

Diese Header-Icons rot macht:

.searchResults .ui-state-default .ui-grid-ico-sort.ui-icon 
{ 
    background-image: url("../images/ui-icons_cd0a0a_256x240.png"); 
} 

Das die Symbole Zentren, wenn nur ein Symbol angezeigt wird und der andere ausgeblendet ist:

.searchResults .ui-jqgrid .ui-icon-asc, .searchResults .ui-jqgrid .ui-icon-desc 
{ 
    height:12px; 
    margin-top:0px; 
} 

Das blendet das inaktive Sortiericon:

.searchResults .ui-state-disabled.ui-icon-desc, .searchResults .ui-state-disabled.ui-icon-asc 
{ 
    display: none; 
} 

Answer 1

jqGrid verwenden Sie jQuery UI für die Sortiersymbole. Sie können Ihr eigenes Thema interaktiv auf http://jqueryui.com/themeroller/ implementieren und es am Ende der Anpassung herunterladen. Wenn Sie nur die Sortier-Symbole zu anderen bereits im Thema vorhandenen Symbolen ändern möchten, können Sie dies einfacher tun. Aber vor allem müssen Sie verstehen, wie die Symbole in den Spaltenüberschriften verwendet werden.

Zum Zeitpunkt der Initialisierung wird Kopfzeilen für alle Spalten von jqGrid erstellt. Jeder Header enthält Bereiche mit den Sortiericons. Die Spannweite Blöcke sieht wie folgt aus

<span class="s-ico" style="display: none;"> 
    <span class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr" sort="asc" /> 
    <span class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr" sort="desc" /> 
</span> 

Wegen mit „ui-Symbol“ Klasse, um die Elemente Hintergrund hat, die aus dem jQuery UI Thema kommen, die Sie verwenden. Aus dem Hintergrund werden die Teile verwendet, die den Symbolen "ui-icon-triangle-1-n" und "ui-icon-triangle-1-s" entsprechen. Klassen ui-icon, ui-icon-triangle-1-n und ui-icon-triangle-1-s wird wie folgt

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; } 
.ui-icon-triangle-1-n { background-position: 0 -16px; } 
.ui-icon-triangle-1-s { background-position: -64px -16px; } 

definiert Wenn Sie dort auf andere Symbole ersetzt werden soll (siehe alle gängigen verfügbaren Symbole am botom von http://jqueryui.com/themeroller/) Sie dies beispielsweise tun können, direkt nach dem jqGrid Erstellen (nach jQuery("#list").jqGrid({/*...*/});). Wenn Sie im Hintergrundbild nicht die Symbole finden, die Sie benötigen, sollten Sie keine vorhandenen Symbole ändern. Sie können einige neue Teile in das Hintergrundbild einfügen, das Sie verwenden.

Es gibt keine direkte Unterstützung für 3-stufige Sortiericons (aufsteigend, absteigend und unsortiert) in jqGrid. Wenn Sie dies implementieren möchten, empfehle ich Ihnen, die Implementierung der sortData-Funktion von grig.base.js, die Sie im src-Unterverzeichnis der heruntergeladenen jqGrid-Quellen finden, sorgfältig zu lesen. Dieser Funktionsaufruf jQuery.hide() oder jQuery.show() Funktionen für die , hinzufügen oder entfernen Sie ui-state-disabled Klasse auf einer der untergeordneten Bereiche und rufen Sie onSortCol Event Handle, wenn es definiert ist.So können Sie alle Änderungen von Sortiersymbolen in Ihrem benutzerdefinierten Ereignishandle onSortCol implementieren.

AKTUALISIERT:Free jqGrid Gabel haben viele Optionen zum Sortieren von Symbolen. Vor allem, wenn unterstützt Font Awesome Icons. Man muss nur das Font Awesome CSS und die Option hinzufügen. Zum Beispiel kann threeStateSort: true verwendet werden, um den Artikel in der ursprünglichen, unsortierten Reihenfolge auf dem 3-d-Klick auf die Spaltenüberschrift anzuzeigen. Man kann sortIconsBeforeText: true verwenden, um die Reihenfolge der Symbole und den Text zu ändern. Das Platzieren der Sortiersymbole vor dem Text könnte hilfreich sein, wenn lange Texte in den Spaltenüberschriften verwendet werden. Man kann die Option showOneSortIcon: true verwenden, um nur ein (desc oder asc) Sortiersymbole anstelle von zwei Sortiersymbolen anzuzeigen (eins über das zweite oder eins neben dem zweiten).

Man kann sogar die Sortiersymbole durch Überschreiben $.jgrid.builderSortIcons Methode vollständig anpassen. The demo zeigt, wie man einfache benutzerdefinierte $.jgrid.builderSortIcons Methode verwenden kann, um * verschiedene Sortiericons für differents Spalten festzulegen. The demo verwendet drei verschiedene Symbole abhängig von der Art der Daten in der Spalte. Die Spalten mit der Standard-Sortieranlage Typ sorttype: "text" Displays

und

die Spalten mit numerischen Typen (sorttype: "integer", sorttype: "int", sorttype: "float", sorttype: "number" oder sorttype: "currency") zeigt

und

und alle anderen Spalten, zum Beispiel die Spalte sorttype: "date" Displays

und