как undeline заголовок столбца в отсортированном jqgrid

Question

Ответа в

how to make sort icons visible in all column headers in jqgrid regardless on sort status

описывает, как добавить Сортируемое указание на столбцы.

Трудно различить отсортированную и несортированную колонку по умолчанию.

Как подчеркнуть отсортированный текст заголовка столбца в добавлении к индикатору сортировки?

Answer 1

Я изменил демо от предыдущего ответа на the following который дисплей

я использовал для демонстрации класса CSS, где я дополнительно подчеркивание изменил цвет текста

.sortedColumnHeader > div { text-decoration: underline; color: blue; } 

Если мы играем вперёд, мы можем использовать только «ui-state-highlight» для подсветки (см. another demo). Заголовок столбца будет, вероятно, даже слишком много отличить от стандартной колонки:

соответствующий код является

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

// 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(); 
      $(this.grid.headers[this.p.lastsort].el).removeClass('sortedColumnHeader'); 
     } 
     $(this.grid.headers[idxcol].el).addClass('sortedColumnHeader'); 
    } 
}); 

// show sort icons of all sortable columns 
colModel = $grid.jqGrid('getGridParam', 'colModel'); 
sortName = $grid.jqGrid('getGridParam', 'sortname'); 
$('#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'}); 
    } 
    if (cmi.name === sortName) { 
     $(this).addClass('sortedColumnHeader'); 
    } 
}); 

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