jqGrid 只允许 1 个排序方向答案

【问题标题】：jqGrid allow only 1 sort directionjqGrid 只允许 1 个排序方向
【发布时间】：2012-02-04 00:34:54
【问题描述】：

jqGrid 的列标题上的排序图标同时显示向上和向下箭头。有没有办法强制图标只显示一个方向，比如只允许升序？

谢谢。

【问题讨论】：

标签： jquery jqgrid sortdirection

【解决方案1】：

在the answer 中，我展示了如何更改排序图标的可见性。我为您修改了之前的解决方案，只显示活动的排序图标。

The demo 演示结果并显示如下标题：

或者这个：

下面的代码展示了代码中最重要的部分：

var $grid = $("#list");

$grid.jqGrid({
    //... other jqGrid options
    sortname: 'invdate',
    sortorder: 'desc',
    onSortCol: function (index, idxcol, sortorder) {
        var $icons = $(this.grid.headers[idxcol].el).find(">div.ui-jqgrid-sortable>span.s-ico");
        if (this.p.sortorder === 'asc') {
            //$icons.find('>span.ui-icon-asc').show();
            $icons.find('>span.ui-icon-asc')[0].style.display = "";
            $icons.find('>span.ui-icon-desc').hide();
        } else {
            //$icons.find('>span.ui-icon-desc').show();
            $icons.find('>span.ui-icon-desc')[0].style.display = "";
            $icons.find('>span.ui-icon-asc').hide();
        }
    }
});
// hide initially the disaabled sorting icon
$('#jqgh_' + $.jgrid.jqID($grid[0].id) + '_' + $.jgrid.jqID(sortName) + '>span.s-ico').each(function () {
    $(this).find('>span.ui-icon-' +
        (sortDirection ? 'asc' : 'desc')).hide();
});

我一开始尝试在onSortCol 中使用$icons.find('>span.ui-icon-asc').show();，但在Google Chrome 中出现问题，因为show() 在<span> 元素上设置了display: block 样式。所以我只是删除了display: none 样式。

【讨论】：

【解决方案2】：

查看 jqGrid 事件文档here。您可以通过在 onSortCol 事件上返回 'stop' 来定义自己的排序。像这样的东西应该可以工作：

onSortCol: function (index, iCol, sortorder) {
    if (sortorder === "desc") {
            return 'stop';
    } else {
            //do regular sorting.
    }
}

此外，如果您在 gridComplete 上执行此操作，它应该隐藏下降箭头：

gridComplete: function () {
    $('.ui-grid-ico-sort.ui-icon-desc.ui-sort-ltr').hide();
}

【讨论】：