ui网格启用筛选事件

Question

我是Angular和ui网格的新手，但我正在将其用于一个项目，我对此印象深刻。我有一个关于给定功能是否存在的问题。我用"enableFiltering"gridOption打开了行过滤，过滤效果很好。因为我有太多的列，而不是一次显示所有列，所以我希望能够在网格上方显示一个标题，显示当前有效的所有过滤器的字符串版本。我相信，当过滤器设置被更改时，这将需要像监听事件这样的东西(然后一些API来获得当前的过滤器状态)？但环顾四周，我没有看到任何似乎与行筛选相对应的事件(相比之下，我确实看到了行选择的事件)。

我是不是缺少了这类功能的挂钩？如果是的话，有人能告诉我它的大致方向吗？或者是目前ui网格中不存在的功能(我怀疑是这样)。

感谢提供的任何帮助

Answer 1

我不认为当前有一个事件会在过滤器更改时触发，但您不应该需要它。

例如，您可以将网格列插入到控制器的范围中，并用ng个重复显示列列表及其筛选器。

以下是如何使用onRegisterApi:将网格放入您的范围

$scope.gridOptions = {
enableFiltering: true,
columnDefs: [
{ name: 'name' },
{ name: 'amount', cellFilter: 'fractionFilter' }
],
onRegisterApi: function (api) {
$scope.grid = api.grid;
}
};

然后，您可以对列进行交互，筛选那些已填充了术语的筛选器的列，并在列内迭代其筛选器。

<span ng-repeat="col in grid.columns | hasFilterTerm">
<strong ng-if="$first"><i>Filters:</i></strong>
<strong>{{ col.name }}:</strong>
<span ng-repeat="f in col.filters">
{{ f.term }} <span ng-if="!$last">,</span>
</span><span ng-if="!$last">;</span>
</span>

您的"列具有活动筛选项"筛选器可能如下所示：

app.filter('hasFilterTerm', function () {
return function (columns) {
var cols = [];
columns.forEach(function (c) {
c.filters.forEach(function (f) {
if (f.term) {
cols.push(c);
}
});
});
return cols;
}
});

下面是一个演示plunker，它只显示了网格下面的活动过滤器列表：http://plnkr.co/edit/rpLcY3JztGjXOu2QMmEU?p=preview将其插入到自定义标头中应该很简单。您不需要向控制器范围公开网格，只需直接在grid.columns上迭代即可。