对包含 Angular 过滤器的 uI 网格列进行排序
Sorting of uI grid column containing Angular filter
我最近开始使用 Angular ui-grid。我不是很了解图书馆的内部结构。
我有一个 ui-grid
列需要显示百分比。所以我将以下过滤器添加到我的 app
并将其与 ui-grid
cellFilter
属性.
一起使用
module.filter('percentage', function () {
return function (input) {
if (!input) {
return '';
} else {
return input + '%';
}
};
})
这工作正常,但在对此列进行排序时。排序工作出乎意料。假设我有 3 行的值为 100,200,300
。我希望它只能有两个排序状态 100,200,300
和 300,200,100
。但是,如果我继续单击此列的 header,我将获得第三种状态 200, 300, 100
或 100, 300,200
。我什至不确定这个状态的模式是什么。
如果我是对的,angular 过滤器仅适用于 views
,不会影响字段模型。所以我认为添加 filter
不会对排序产生影响。
除此之外,两个预期的排序(升序、降序)显示完美,唯一的问题是出现第三个。我该如何解决这个问题。
我是否遗漏了任何实现??请帮我解决这个问题。
编辑:字符串列也会出现此问题。据我了解,就排序而言,只能有一种 ASCENDING 和一种 DESCENDING 状态。但是我得到了更多的安排。
可以使用sortDirectionCycle
去掉排序的第三种状态
columnDefs: [
{ field: 'name', sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC] },
{ field: 'gender', sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC] },
{ field: 'company', enableSorting: false }
]
从文档中,当单击列标题时,排序方向将循环为升序,然后降序,然后返回未排序。您可以通过设置 sortDirectionCycle columnDef 选项重新排列此循环或跳过其中的一部分。有关详细信息,请查看此 link sortDirectionCycle
我最近开始使用 Angular ui-grid。我不是很了解图书馆的内部结构。
我有一个 ui-grid
列需要显示百分比。所以我将以下过滤器添加到我的 app
并将其与 ui-grid
cellFilter
属性.
module.filter('percentage', function () {
return function (input) {
if (!input) {
return '';
} else {
return input + '%';
}
};
})
这工作正常,但在对此列进行排序时。排序工作出乎意料。假设我有 3 行的值为 100,200,300
。我希望它只能有两个排序状态 100,200,300
和 300,200,100
。但是,如果我继续单击此列的 header,我将获得第三种状态 200, 300, 100
或 100, 300,200
。我什至不确定这个状态的模式是什么。
如果我是对的,angular 过滤器仅适用于 views
,不会影响字段模型。所以我认为添加 filter
不会对排序产生影响。
除此之外,两个预期的排序(升序、降序)显示完美,唯一的问题是出现第三个。我该如何解决这个问题。
我是否遗漏了任何实现??请帮我解决这个问题。
编辑:字符串列也会出现此问题。据我了解,就排序而言,只能有一种 ASCENDING 和一种 DESCENDING 状态。但是我得到了更多的安排。
可以使用sortDirectionCycle
去掉排序的第三种状态
columnDefs: [
{ field: 'name', sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC] },
{ field: 'gender', sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC] },
{ field: 'company', enableSorting: false }
]
从文档中,当单击列标题时,排序方向将循环为升序,然后降序,然后返回未排序。您可以通过设置 sortDirectionCycle columnDef 选项重新排列此循环或跳过其中的一部分。有关详细信息,请查看此 link sortDirectionCycle