Question

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

后台：我构建了一个使用UI-Grid的应用程序，并利用了built-in filtering functionality。它还有一个以角度写的跨列搜索。

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

研究完成问题：

1）通过UI-Grid教程搜索...失败

2）看着提供的UI-Grid API ...部分成功！好像我认为我在“clearAllFilters”函数（here is the source code）中找到了我正在寻找的东西，但我无法弄清楚如何实现它，所以步骤3 ......

3）谷歌搜索疯狂的实现演示/示例/帮助/提示/任何东西！？ ...失败

4）在Stack Overflow上寻求帮助：）

提前致谢。

Answer 1

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

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

Answer 2

你可以这样做：

//获取网格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 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

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

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

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

4 个答案: