如何取消定义jqgrid中的排序后的列标题 [英] how to undeline sorted column header in jqgrid

问题描述

答案

无论排序状态如何，如何使排序图标在jqgrid的所有列标题中可见

描述如何向列添加可排序的指示.

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 ?

推荐答案

我从先前答案的

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

我在演示CSS类时使用了该类，除了下划线以外，我还更改了文本的颜色

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

如果我们向前播放，则可以仅使用"ui-state-highlight"进行突出显示(请参见另一个演示).列标题与标准列的区别可能更大:

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:

对应的代码是

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.

这篇关于如何取消定义jqgrid中的排序后的列标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！