Как изменить значки сортировки столбцов для jqgrid?

Question

Мне нужно изменить значки сортировки по умолчанию для jqgrid. В настоящее время для каждой колонки отображается стрелка вверх и вниз. Как я могу заменить его одним значком, который изменяется по мере его нажатия?

В принципе, значок должен переключаться между восходящим, нисходящим и несортированным.

---

Решение

Используя ответ Олега я изменил иконки двойные стрелки по умолчанию, чтобы быть одной красной стрелкой вверх или вниз, что переключает при сортировке.

The jqGrid заворачивают в div с SearchResultsclass.

Это делает значки заголовков красные:

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

Это центрирует значки, когда только один значок, показывающий, а другой спрятанных:

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

Это скрывает значок неактивных сортировок:

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

Answer 1

jqGrid использовать пользовательский интерфейс jQuery для значков сортировки. Вы можете реализовать свою собственную тему intaractive на http://jqueryui.com/themeroller/ и загрузить ее в конце настройки. Если вы хотите изменить значки сортировки на другие значки, уже существующие в теме, вы можете сделать это более легко. Но прежде всего вам нужно понять, как значки будут использоваться в заголовках столбцов.

В момент инициализации будут созданы заголовки для всех столбцов jqGrid. Каждый заголовок содержит пробелы с значками сортировки. Пролетные блоки выглядят следующим образом

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

Из-за имеющим класс «UI-значок» элементы имеют фон, которые приходят от темы JQuery UI, который вы используете. С фона будут использоваться части, соответствующие значкам «ui-icon-triangle-1-n» и «ui-icon-triangle-1-s». Классы ui-icon, ui-icon-triangle-1-n и ui-icon-triangle-1-s определяются следующим образом

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

Если вы хотите заменить там другие иконки (см всех стандартные доступные иконок на бот из http://jqueryui.com/themeroller/), вы можете сделать это, например, непосредственно после создания jqGrid (после jQuery("#list").jqGrid({/*...*/});). Если вы не нашли в фоновом изображении значки, которые вам нужны, лучше не менять существующие значки. Вы можете добавить некоторые новые части в фоновое изображение, которое вы используете.

В jqGrid нет прямой поддержки значков сортировки в 3 состояниях (восходящий, нисходящий и несортированный). Если вы действительно хотите это реализовать, я рекомендую вам внимательно прочитать функцию sortDatagrig.base.js, которую вы найдете в подкаталоге src загруженных источников jqGrid. Этот вызов функции jQuery.hide() или jQuery.show() функции для span.s-ico, добавьте или удалите ui-state-disabled класс на одном из дочерних пролетов и вызовите onSortCol дескриптор события, если он определен.Таким образом, вы можете реализовать все изменения значков сортировки внутри своего настраиваемого дескриптора события onSortCol.

ОБНОВЛЕНО:Free jqGrid вилка имеет множество вариантов настройки значков сортировки. Прежде всего, если поддерживает Font Awesome иконки. Нужно просто включить шрифт Awesome CSS и опцию. Например, можно использовать threeStateSort: true, чтобы разрешить отображение элемента в оригинальном, несортированном порядке на 3-м щелчке по заголовку столбца. Для изменения порядка значков и текста можно использовать sortIconsBeforeText: true. Размещение значков сортировки перед текстом может оказаться полезным в случае использования длинных текстов в заголовках столбцов. Можно использовать опцию showOneSortIcon: true, чтобы показывать только одну иконку сортировки (desc or asc) вместо двух значков сортировки (одна над второй или одна рядом со второй).

Можно даже полностью настроить значки сортировки, переписав метод $.jgrid.builderSortIcons. The demo показывает, как можно использовать простой настраиваемый метод $.jgrid.builderSortIcons, чтобы установить * различные значки сортировки для столбцов differents. The demo использует три разных значка в зависимости от типа данных в столбце. Столбцы с типом сортировки по умолчанию sorttype: "text" отображает

и

в столбцы, имеющие числовые типы (sorttype: "integer", sorttype: "int", sorttype: "float", sorttype: "number" или sorttype: "currency") дисплеи

и

и все остальные столбцы, например, столбец, имеющий sorttype: "date" дисплеи

и