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

我发现这个想法很好，所以我创建了the 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'});
    }
});

UPDATED ：如果您需要在大多数紧凑的列中显示信息，您可以在列标题的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
}

您可以将其更改为左对齐。根据结果​​，您将获得列标题的更紧凑外观：

查看相应的demo。顺便提一下，我建议您测试列宽是否足够大，以便在Webkit浏览器（Google Chrome或Safari）中显示排序图标。