jqGrid Pager Area – Uso di icone Font impressionante

Mi piacerebbe usare le icone Font Awesome:

 

nell’area jqGrid del cercapersone invece delle immagini fisiche per impostazione predefinita.

 .navButtonAdd('#vw_ComplaintSearchGridPager', { caption: '', buttonicon: 'ui-icon-disk', title: 'Save Grid Settings', onClickButton: function () { $(this).SaveGridSetting(); } }) 

Qualcuno sa come riuscirci?

inserisci la descrizione dell'immagine qui

È una domanda molto interessante! Non ho mai usato le icone di Font Awesome , ma sembra un progetto molto interessante.

jqGrid non ha attualmente un supporto diretto delle icone di Font Awesome, ma ho preparato la semplice demo che mostra come sostituire le icone del navigatore standard di jQuery UI con le icone corrispondenti di Font Awesome.

Si può vedere in gran parte la differenza rispetto alle icone del navigatore originale dopo lo zoom della pagina. Ho incluso sotto il navigatore visualizzato con lo zoom del 400%:

Il navigatore originale che utilizza le icone dell’interfaccia utente jQuery

inserisci la descrizione dell'immagine qui

Il navigatore con icone Font Awesome:

inserisci la descrizione dell'immagine qui

Il codice che ho usato è molto semplice. Invece di uso

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

ero solito

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

Ho aggiunto il CSS

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

Penso che sia ansible sostituire più icone dell’interfaccia utente jQuery con le icone di Font Awesome, ma non è molto semplice. Penserò al problema di più e contatterò lo sviluppatore di jqGrid (Tony Tomov) per prendere in considerazione l’idea di rendere jqGrid più amichevole con le icone di Font Awesome, in modo che sia ansible passare semplicemente alle icone di Font Awesome.

AGGIORNATO : Ho aggiunto il codice che consente di sostituire in alto più icone dal cercapersone:

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

Come risultato si ottiene il seguente cercapersone:

inserisci la descrizione dell'immagine qui

invece di

inserisci la descrizione dell'immagine qui

AGGIORNATO 2 : il codice per cambiare l’icona di minimizzazione sembra un po ‘più completo. Si dovrebbe prima cambiare l’icona inizialmente

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

e poi cambialo dopo ogni clic sull’icona:

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

Inoltre, è necessario aggiungere il CSS

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

Per correggere le icone di ordinamento ho usato il codice

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

e il 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; } 

Come risultato si otterrà quanto segue:

inserisci la descrizione dell'immagine qui

AGGIORNAMENTO 3 : nella prossima demo è ansible trovare una sostituzione completa delle icone dell’interfaccia utente jQuery con le icone Font Awesome.

AGGIORNATO 4 : La risposta fornisce la soluzione per Font Awesome versione 4.x.

Ho pensato di mettere una risposta alternativa CSS per gli interessati. Uno dei nostri sviluppatori ha implementato un’opzione JS, che funzionava funzionalmente, tuttavia c’era un ritardo prima del rendering corretto (non ideale).

Abbiamo utilizzato icone fantastiche per le nostre opzioni di impaginazione, ed ecco come l’abbiamo implementata.

Ho trovato le quattro classi che jqGrid stava usando per le icone di paging che desideravamo personalizzare e creato il seguente css per applicare gli stili fantastici del font di base

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

Quindi è semplicemente una questione di afferrare il content dall’icona della famiglia di font e utilizzarli come propri.

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

Così l’intero CSS insieme assomiglia a questo

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

E l’output sulla nostra rete senza JS e senza ritardi inserisci la descrizione dell'immagine qui

Guardando la risposta di Oleg sopra, ho fatto quanto segue per semplificare le cose. CSS aggiuntivo

 .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; è facoltativo E funziona solo con le icone solo senza didascalia …

E poi inizia ad aggiungere icone fontawesome in navButtonAdd like

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

ecc. Puoi usare tutte le funzionalità extra da font-awesome come icon-rotate-XX. In questo modo non ho dovuto rimuovere la class ui-icon da span.

Ispirato dalla risposta di @afreeland, ho creato un css disponibile su github che ti permette di convertire le tue icone in icone Font-Awesome.

A mio parere, il vantaggio in termini di prestazioni rispetto al metodo jquery descritto da @Oleg è importante. È anche una soluzione molto elegante secondo me.

Siete invitati a usarlo: https://github.com/guylando/ToAF

Nota: è necessario dare la priorità a questi stili di file di ToAF.css sugli altri stili di icone, in modo da poterli ad esempio copiare il contenuto css in un tag nel proprio documento.