Question

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

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

Решение

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

jqGrid заключен в div сa searchResults class.

. Значки заголовка отображаются красным цветом:

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

Oleg · Answer 1 · 01 сентября 2010

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

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

<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-icon" у элементов есть фон, полученный из темы пользовательского интерфейса jQuery, которую вы используете.Из фона будут использоваться детали, соответствующие значкам «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 состояниями (по возрастанию, по убыванию и без сортировки). Если вы хотите реализовать это, я рекомендую вам внимательно прочитать реализациюsortData функция grig.base.js, которая находится в подкаталоге src загруженных источников jqGrid. Этот вызов функции jQuery.hide() или jQuery.show() функций для span.s-ico, добавления или удаления класса ui-state-disabled для одного из дочерних элементов.spans и вызывают onSortCol дескриптор события, если он определен. Таким образом, вы можете реализовать все изменения значков сортировки внутри своего собственного onSortCol дескриптора события.

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

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

и

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

и