无论排序状态如何，如何使排序图标在 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 来实现该行为：

用代码实现this：

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
}

您可以将其更改为左对齐。作为结果，您将拥有更紧凑的列标题外观：

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