javascript - how to undeline sorted column header in jqgrid

Question

Answer in

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

describes how to add sortable indication to columns.

It is difficult to distinguish sorted and unsorted column by default sort indicator.

How to underline sorted column header text in addidion to sort indicator ?

Answer 1

I modified the demo from the previous answer to the following which display now

I used for the demo the CSS class where I additionally to underlining changed the color of the text

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

If we play forward we can use just the 'ui-state-highlight' for the highlighting (see another demo). The column header will be probably even too much distinguish from the standard column:

The corresponding code is

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');
    }
});

At the end I want to reference one more old answer where it's shown another sophisticated method to highlight the sorted column.