无论排序状态如何,如何在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

viewsortcols:[true,'vertical',true]

Answer 2

我觉得这个想法很好,所以我创建了实现行为的demo:

用代码实现这个:

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浏览器(谷歌浏览器或Safari)中的排序图标.