Angular UI-Grid：如何清除所有（通用 Angular 和内置 UI-Grid）按钮单击时的列过滤器

Question

如何清除和刷新我的所有（一般 Angular 和内置UI-Grid) 过滤按钮点击？

背景： 我构建了一个使用 UI-Grid 并利用 built-in filtering functionality 的应用程序。它还有一个用 angular.

编写的跨列搜索

当前战斗 我希望能够通过单击按钮清除和刷新我的过滤器。到目前为止，我已经能够为跨列搜索 实现这一点，但是没有已经成功地为内置列过滤器 实现了它（具有讽刺意味的是，我认为这将是简单的部分！）。

对问题的研究：

1) 搜索了 UI-网格教程...失败

2) 查看了提供的 UI-Grid API ...partial success! Seems like I think I found what I'm looking for in the "clearAllFilters" function (here is the source code) 但我不知道如何实现它，所以进入第 3 步...

3) 疯狂地用谷歌搜索实施 demos/examples/help/hints/anything！？ ...失败

4) 在 Stack Overflow 上寻求帮助 :)

提前致谢。

Answer 1

你可以这样做：

//获取网格api

$scope.myGridOptions.onRegisterApi = function(gridApi) {
  $scope.myGridApi=gridApi;
}

您必须将此功能绑定到清除按钮：

        $scope.clearFilters = function() {
            var columns = $scope.myGridApi.grid.columns;
                for (var i = 0; i < columns.length; i++) {
                    if (columns[i].enableFiltering) {
                        columns[i].filters[0].term='';
                    }
                }
            };

Answer 2

抱歉，我没有看到 ui 网格的 clearAllFilters() 函数。所以它变得更简单。你可以这样做：

  $scope.clearFilters = function() {
            $scope.myGridApi.grid.clearAllFilters();
        };

Answer 3

请试试这个：

$scope.gridApi.core.clearAllFilters();

$scope.gridApi 来自我的 ui-grid 元素的初始设置

 $scope.gridOptions = {
        flatEntityAccess: true,
        paginationPageSizes: [10, 25, 50, 75, 100],
        paginationPageSize: 25,
        enableFiltering: true,
        enableColumnResizing: true,
        enableGridMenu: true,
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
        },
        columnDefs: [{

Answer 4

我认为这是简单的方法（只需将网格数据替换为 original/actual json 数据），您只需单击一个按钮即可创建并调用下面的 clearFilters 函数。

$scope.clearFilters = function() {
        $scope.yourGridOptions.data = $scope.originalData;
    }

Angular UI-Grid：如何清除所有（通用 Angular 和内置 UI-Grid）按钮单击时的列过滤器

Angular UI-Grid: How to Clear All (general Angular and built-in UI-Grid) Column Filters On Button Click

filtering

angularjs

angular-ui-grid