¿Cómo se cambian los iconos de clasificación de columnas para una jqgrid?

Question

Necesito cambiar los iconos de clasificación predeterminados para jqgrid. Actualmente tiene una flecha hacia arriba y hacia abajo para cada columna. ¿Cómo puedo reemplazarlo con un único ícono que cambia a medida que se hace clic en él?

Básicamente, el icono debe alternar entre ascendente, descendente y sin clasificar.

---

Solución

Usando la respuesta de Oleg me cambiaron los iconos de flecha doble incumplimiento a ser una sola roja flecha arriba o abajo que alterna cuando ordenados hacia abajo.

El jqGrid está envuelto en una div con un searchResultsclass.

Esto hace que los iconos de cabecera rojas:

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

Esta centros de los iconos cuando sólo un icono de la muestra y la otra está oculta:

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

Esto oculta el icono de tipo inactivo:

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

Answer 1

jqGrid usa jQuery UI para los iconos de ordenación. Puede implementar su propio tema intaractive en el http://jqueryui.com/themeroller/ y descargarlo al final de la personalización. Si solo desea cambiar los iconos de ordenación a otros iconos que ya existen en el tema, puede hacerlo más fácilmente. Pero antes de todo, debe comprender cómo se usarán los íconos en los encabezados de las columnas.

En el momento de la inicialización, se crearán encabezados para todas las columnas de jqGrid. Cada encabezado contiene tramos con los iconos ordenar. Los bloques de envergadura parece siguiente

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

Debido a que tiene clase "ui-icono" tiene los elementos de fondo que vienen del tema de jQuery UI que se utiliza. Desde el fondo se usarán las partes correspondientes a los íconos "ui-icon-triangle-1-n" y "ui-icon-triangle-1-s". Clases ui-icon, ui-icon-triangle-1-n y ui-icon-triangle-1-s se define de la siguiente manera

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

Si desea reemplazar allí a otros iconos (ver todos los iconos estándar disponibles en el botom de http://jqueryui.com/themeroller/) se puede hacer esto, por ejemplo, directamente después de la creación de la jqGrid (después de jQuery("#list").jqGrid({/*...*/});). Si no encuentra en la imagen de fondo los íconos que necesita, mejor no cambie los íconos existentes. Puede agregar algunas partes nuevas en la imagen de fondo que usa.

No hay soporte directo para los iconos de clasificación de 3 estados (ascendente, descendente y sin clasificar) en jqGrid. Si desea implementar esto, le recomendaré que lea cuidadosamente la implementación de la función sortData de grig.base.js que se encuentra en el subdirectorio src de las fuentes descargadas de jqGrid. Esta función llama a las funciones jQuery.hide() o jQuery.show() para span.s-ico, agrega o elimina la clase ui-state-disabled en uno de los intervalos de hijos y llama al onSortCol identificador de evento si está definido.De modo que puede implementar todos los iconos de cambio de orden dentro de su identificador de evento personalizado onSortCol.

ACTUALIZADO:Free jqGrid tenedor tiene muchas opciones para personalizar los iconos de clasificación. En primer lugar, si es compatible con los iconos Font Awesome. Solo se necesita incluir el Font Awesome CSS y la opción. Uno puede, por ejemplo, usar threeStateSort: true para permitir que se muestre el artículo en orden original sin ordenar en el clic tridimensional en el encabezado de la columna. Se puede usar sortIconsBeforeText: true para cambiar el orden de los iconos y el texto. Colocar los iconos de clasificación antes del texto podría ser útil en caso de utilizar texto largo en los encabezados de las columnas. Se puede usar la opción showOneSortIcon: true para mostrar solo un ícono de clasificación (desc o asc) en lugar de dos íconos de clasificación (uno sobre el segundo o uno cerca del segundo).

Incluso se puede personalizar completamente los iconos de clasificación sobrescribiendo el método $.jgrid.builderSortIcons. The demo muestra cómo se puede usar el método personalizado simple $.jgrid.builderSortIcons para establecer * diferentes iconos de clasificación para diferentes columnas. The demo utiliza tres iconos diferentes que dependen del tipo de datos en la columna. Las columnas con el tipo de clasificación predeterminado sorttype: "text" muestra

y

las columnas que tienen tipos numéricos (sorttype: "integer", sorttype: "int", sorttype: "float", sorttype: "number" o sorttype: "currency") Muestra

y

y el resto de la columna, por ejemplo, la columna que tiene sorttype: "date" muestra

y