Come si modificano le icone di ordinamento delle colonne per un jqgrid?

Question

Devo modificare le icone di ordinamento di default per il jqgrid. Attualmente ha una freccia su e giù per ogni colonna. Come posso sostituirlo con una singola icona che cambia quando viene cliccato?

Fondamentalmente, l'icona deve alternare tra ascendente, discendente e non ordinato.

---

Soluzione

Utilizzando la risposta di Oleg ho cambiato le doppie frecce predefinita da un singolo colore rosso freccia su o giù che commuta quando ordinato.

Il jqGrid è avvolto in un div con searchResultsclass.

Questo rende le icone di intestazione rossi:

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

Questa centri le icone quando una sola icona mostra e l'altra è nascosta:

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

Questo nasconde l'icona di tipo attivo:

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

Answer 1

jqGrid utilizzare l'interfaccia utente jQuery per le icone di ordinamento. È possibile implementare il proprio tema in modo interattivo su http://jqueryui.com/themeroller/ e scaricarlo al termine della personalizzazione. Se vuoi solo modificare le icone di ordinamento in altre icone già esistenti nel tema, puoi farlo più facilmente. Ma prima di tutto devi capire come verranno utilizzate le icone nelle intestazioni delle colonne.

Al momento dell'inizializzazione verranno create intestazioni per tutte le colonne di jqGrid. Ogni intestazione contiene span con le icone di ordinamento. I blocchi campata si presenta come segue

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

causa di avere classe "ui-icon" gli elementi di sfondo ha che provengono dal tema jQuery UI che si utilizza. Dallo sfondo verranno utilizzate le parti corrispondenti alle icone "ui-icon-triangle-1-n" e "ui-icon-triangle-1-s". Classi ui-icon, ui-icon-triangle-1-n e ui-icon-triangle-1-s è definito come segue

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

Se si desidera sostituire lì per altre icone (vedi tutte le icone standard disponibili presso il botom di http://jqueryui.com/themeroller/) si può fare questo ad esempio subito dopo la creazione del jqGrid (dopo jQuery("#list").jqGrid({/*...*/});). Se non trovi nell'immagine di sfondo le icone di cui hai bisogno, non dovresti cambiare le icone esistenti. Puoi aggiungere alcune nuove parti nell'immagine di sfondo che usi.

Non esiste un supporto diretto per icone di ordinamento a 3 stati (crescente, decrescente e non ordinata) in jqGrid. Se desideri implementarlo, ti suggerisco di leggere attentamente l'implementazione della funzione sortData di grig.base.js che trovi nella sottodirectory src delle origini jqGrid scaricate. Questa funzione chiama le funzioni jQuery.hide() o jQuery.show() per span.s-ico, aggiunge o rimuove la classe ui-state-disabled su una delle spanne child e chiama l'handle di evento onSortCol se è definita.In questo modo puoi implementare tutte le modifiche delle icone di ordinamento all'interno dell'handle dell'evento personalizzato onSortCol.

AGGIORNATO:Free jqGrid la forcella ha molte opzioni per personalizzare le icone di ordinamento. Prima di tutto se supporta le icone Font Awesome. Basta aggiungere il Font Awesome CSS e l'opzione. Ad esempio, è possibile utilizzare threeStateSort: true per consentire la visualizzazione dell'elemento nell'ordine originale non ordinato sul clic 3-d sull'intestazione della colonna. Si può usare sortIconsBeforeText: true per cambiare l'ordine delle icone e il testo. L'inserimento delle icone di ordinamento prima del testo potrebbe essere utile in caso di utilizzo di testi lunghi nelle intestazioni delle colonne. Si può usare l'opzione showOneSortIcon: true per mostrare solo una (desc o asc) icone di ordinamento invece di due icone di ordinamento (una sopra la seconda o una accanto alla seconda).

Uno può persino personalizzare completamente le icone di ordinamento sovrascrivendo il metodo $.jgrid.builderSortIcons. The demo mostra come si può usare il semplice metodo personalizzato $.jgrid.builderSortIcons per impostare * diverse icone di ordinamento per colonne differenti. The demo utilizza tre icone diverse a seconda del tipo di dati nella colonna. Le colonne con il tipo di ordinamento predefinito sorttype: "text" visualizza

e

le colonne aventi tipi numerici (sorttype: "integer", sorttype: "int", sorttype: "float", sorttype: "number" o sorttype: "currency") Visualizza

e

e tutte le altre colonne, ad esempio, la colonna con sorttype: "date" schermi

e