как сделать значки сортировки видимыми во всех заголовках столбцов в jqgrid независимо от статуса сортировки

Question

В столбце jqGrid отображаются значки сортировки, только если столбец отсортирован.

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

Telerik Radgrid имеет это:

http://www.telerik.com/community/forums/aspnet/grid/possible-to-show-sort-icon-regardless-sort-status.aspx

Как реализовать это в jqGrid? В настоящее время нет никаких признаков того, что столбцы можно сортировать.

Обновление

Я попробовал решение из ответа, используя colmodel ниже.

Вопросы:

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

2. После сортировки значки сортировки во всех столбцах, кроме отсортированного, теряются. Как их сохранить?

Answer 1

протоколов просмотра: [true, 'vertical', true]

Answer 2

Я нахожу идею хорошей, поэтому я создал демо , которое реализует поведение:

Реализация этого с кодом:

var $grid = $("#list"), colModel;

// create the grid
$grid.jqGrid({
    // all typical jqGrid parameters
    onSortCol: function (index, idxcol, sortorder) {
        if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol
                && this.p.colModel[this.p.lastsort].sortable !== false) {
            // show the icons of last sorted column
            $(this.grid.headers[this.p.lastsort].el)
                .find(">div.ui-jqgrid-sortable>span.s-ico").show();
        }
    }
});

// show sort icons of all sortable columns
colModel = $grid.jqGrid('getGridParam', 'colModel');
$('#gbox_' + $.jgrid.jqID($grid[0].id) +
    ' tr.ui-jqgrid-labels th.ui-th-column').each(function (i) {
    var cmi = colModel[i], colName = cmi.name;

    if (cmi.sortable !== false) {
        // show the sorting icons
        $(this).find('>div.ui-jqgrid-sortable>span.s-ico').show();
    } else if (!cmi.sortable && colName !== 'rn' && colName !== 'cb' && colName !== 'subgrid') {
        // change the mouse cursor on the columns which are non-sortable
        $(this).find('>div.ui-jqgrid-sortable').css({cursor: 'default'});
    }
});

ОБНОВЛЕНО : если вам нужно отобразить информацию в столбцах, в основном компактных, вы можете внести некоторые изменения в CSS заголовка столбца. Например, по умолчанию у вас есть выравнивание по центру во всех заголовках столбцов. С учетом следующего CSS

.ui-jqgrid .ui-jqgrid-htable th.ui-th-column
{
    text-align:left
}
.ui-jqgrid .ui-jqgrid-htable th.ui-th-column div.ui-jqgrid-sortable
{
    margin-left:3px;margin-top:3px
}

Вы можете изменить его на левое выравнивание. В результате вы получите более компактный вид заголовков столбцов:

см. Соответствующую демонстрацию . Кстати, я рекомендую вам проверить, достаточно ли велика ширина столбца для отображения значков сортировки в браузерах Webkit (Google Chrome или Safari).