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

Question

如何在单击按钮时清除并刷新我的所有（通用 Angular 和内置 UI-Grid）过滤器？

背景：我已经构建了一个使用 UI-Grid 并利用 built-in filtering functionality 的应用程序。它还有一个用 Angular 编写的跨列搜索。

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

对问题的研究：

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

2) 查看提供的UI-Grid API ...部分成功！好像我想我在“clearAllFilters”函数（here is the source code）中找到了我想要的东西，但我不知道如何实现它，所以进入第 3 步......

3) 为实现演示/示例/帮助/提示/任何东西而疯狂地在 Google 上搜索！？ ...失败

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

提前致谢。

Answer 1

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

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

Answer 2

请试试这个：

$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 3

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

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

Answer 4

你可以这样做：

//获取网格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='';
                    }
                }
            };