对包含角度滤波器的uI网格列进行排序

I have recently started using Angular ui-grid. I am not very well versed with the internals of the library.

我最近开始使用Angular ui-grid。我不太熟悉图书馆的内部。

I had a ui-grid column that required to display percentages. SO I added the following filter to my app and used it along with ui-grid cellFilter property.

我有一个需要显示百分比的ui-grid列。所以我在我的应用程序中添加了以下过滤器,并将其与ui-grid cellFilter属性一起使用。

module.filter('percentage', function () {
    return function (input) {
        if (!input) {
            return '';
        } else {
            return input + '%';
        }
    };
})

This worked fine, but while sorting this column. The sorting works unexpectedly. Suppose if I have 3 rows with values 100,200,300. I expect it can have only two sorted states 100,200,300 and 300,200,100. But if I keep clicking the header of this column I get a third state as 200, 300, 100 or as 100, 300,200. I am even not sure what the pattern is for this state.

这工作正常,但在对此列进行排序时。排序工作意外。假设我有3行,值为100,200,300。我预计它只能有两个排序状态100,200,300和300,200,100。但是,如果我一直点击这个列的标题,我得到第三个状态为200,300,100或100,300,200。我甚至不确定这种状态的模式是什么。

If I am right, The angular filter works only on the views and do not impact model of the field. So I do not think adding filter can have an impact on sorting.

如果我是对的,则角度过滤器仅适用于视图,不会影响字段的模型。所以我认为添加过滤器不会对排序产生影响。

Apart from that the two expected sorting (ASCENDING, DESCENDING) appears perfectly, the only problem being the appearance of third. How do I resolve this issue.

除此之外,两个预期的排序(ASCENDING,DESCENDING)看起来很完美,唯一的问题是第三个出现。我该如何解决这个问题。

Am I missing any implementation ?? Kindly help me resolve this.

我错过了任何实现吗?请帮我解决这个问题。

Edit: This issue occurs for string column as well. In my understanding there can only be one ASCENDING and one DESCENDING state as far as sorting is considered. But I get more arrangements.

编辑:字符串列也会出现此问题。根据我的理解,只考虑排序,只能有一个ASCENDING和一个DESCENDING状态。但是我得到了更多的安排。

1 个解决方案

#1

You can use sortDirectionCycle to remove the third state of sorting.

您可以使用sortDirectionCycle删除第三种排序状态。

columnDefs: [
   { field: 'name', sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC] },
   { field: 'gender', sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC] },
   { field: 'company', enableSorting: false }
]

From document, When clicking on a column heading the sort direction will cycle to ascending, then descending, then back to unsorted. You may rearrange this cycle or skip part of it by setting the sortDirectionCycle columnDef option. For more details check this link sortDirectionCycle

从文档中,单击列标题时,排序方向将循环升序,然后降序,然后返回未排序。您可以通过设置sortDirectionCycle columnDef选项重新排列此循环或跳过部分循环。有关更多详细信息,请检查此链接sortDirectionCycle