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

问题描述

回答

).列标题可能与标准列有太多区别:

对应的代码是

var $grid = $("#list"), colModel, sortName;//创建网格$grid.jqGrid({//所有典型的 jqGrid 参数onSortCol:函数(索引，idxcol，排序){if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol&&this.p.colModel[this.p.lastsort].sortable !== false) {//显示最后一个排序列的图标$(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');}});//显示所有可排序列的排序图标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) {//显示排序图标$(this).find('>div.ui-jqgrid-sortable>span.s-ico').show();} else if (!cmi.sortable && colName !== 'rn' && colName !== 'cb' && colName !== 'subgrid') {//在不可排序的列上改变鼠标光标$(this).find('>div.ui-jqgrid-sortable').css({cursor: 'default'});}如果(cmi.name === sortName){$(this).addClass('sortedColumnHeader');}});

最后，我想再引用一个旧答案，其中显示了另一种突出排序列的复杂方法.

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 ?

解决方案

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.

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