Question

目前我的ui-grid有外部过滤器，但有enableFiltering: true，所以我仍然可以在我的列上使用filter属性（也许这是错误的，我不知道，但是ui-grid过滤API运行良好，所以我不想搞砸它。）

问题在于enableFiltering属性还控制了网格的Clear All Filters菜单选项的可见性。

我已尝试使用uiGridGridMenuService.removeFromGridMenu(grid, id)取消注册菜单选项，但在首次呈现网格时这不起作用，因为直到用户才定义grid.gridMenuScope.menuItems属性第一次点击网格菜单按钮。此外，此菜单项的ID分配为menuitem-0，而不是某些静态/唯一属性，因此即使删除确实有效 - 它也不是一种安全的方式来删除它。最后，根据下面的代码并运行调试器，每次单击网格菜单按钮时都会执行getMenuItems调用，因此每次都会添加clear filter选项。

除了不使用网格过滤API，或者2）覆盖菜单操作之外，没有任何方法可以1）防止出现此菜单选项。 / p>

这里是网格菜单按钮的指令代码（注意$broadcast事件，也许我可以使用它？但那也是脆弱/ hacky）：

.directive('uiGridMenuButton', ['gridUtil', 'uiGridConstants', 'uiGridGridMenuService', 'i18nService',
function (gridUtil, uiGridConstants, uiGridGridMenuService, i18nService) {

  return {
    priority: 0,
    scope: true,
    require: ['^uiGrid'],
    templateUrl: 'ui-grid/ui-grid-menu-button',
    replace: true,

    link: function ($scope, $elm, $attrs, controllers) {
      var uiGridCtrl = controllers[0];

      // For the aria label
      $scope.i18n = {
        aria: i18nService.getSafeText('gridMenu.aria')
      };

      uiGridGridMenuService.initialize($scope, uiGridCtrl.grid);

      $scope.shown = false;

      $scope.toggleMenu = function () {
        if ( $scope.shown ){
          $scope.$broadcast('hide-menu');
          $scope.shown = false;
        } else {
          $scope.menuItems = uiGridGridMenuService.getMenuItems( $scope );
          $scope.$broadcast('show-menu');
          $scope.shown = true;
        }
      };

      $scope.$on('menu-hidden', function() {
        $scope.shown = false;
        gridUtil.focus.bySelector($elm, '.ui-grid-icon-container');
      });
    }
  };    
}]);

这里是getMenuItems服务方法：

getMenuItems: function( $scope ) {
  var menuItems = [
    // this is where we add any menu items we want to always include
  ];

  if ( $scope.grid.options.gridMenuCustomItems ){
    if ( !angular.isArray( $scope.grid.options.gridMenuCustomItems ) ){
      gridUtil.logError( 'gridOptions.gridMenuCustomItems must be an array, and is not');
    } else {
      menuItems = menuItems.concat( $scope.grid.options.gridMenuCustomItems );
    }
  }

  var clearFilters = [{
    title: i18nService.getSafeText('gridMenu.clearAllFilters'),
    action: function ($event) {
      $scope.grid.clearAllFilters(undefined, true, undefined);
    },
    shown: function() {
      return $scope.grid.options.enableFiltering;
    },
    order: 100
  }];
  menuItems = menuItems.concat( clearFilters );

  menuItems = menuItems.concat( $scope.registeredMenuItems );

  if ( $scope.grid.options.gridMenuShowHideColumns !== false ){
    menuItems = menuItems.concat( service.showHideColumns( $scope ) );
  }

  menuItems.sort(function(a, b){
    return a.order - b.order;
  });

  return menuItems;
}

Answer 1

如果您不介意放入jQuery，请将其添加到gridOptions.onRegisterApi函数中：

// Need the timeout yield to let the grid fully materialize
$timeout(function () {
  $(".ui-grid-menu-button").click(function () {
    $("button.ui-grid-menu-item:contains('Clear all filters')").hide();
  });
});

Answer 2

我注意到Clear All Filters选项总是有id =＆＃34; menuitem-0＆＃34;，你可以在css中执行此操作：

#menuitem-0{
    display: none;
}

Answer 3

我创建了自己的show / hide columns菜单指令。诀窍是让网格api有一个承诺。在我的控制器中，我这样做：

var deferred = $q.defer();
$scope.gridApi = deferred.promise;

$scope.grid = {
    onRegisterApi: function (gridApi) {
        // Timeout is a hack to solve a race condition where api
        // doesn't actually exist when this callback is fired.
        // See: https://github.com/angular-ui/ui-grid/issues/1717
        $timeout(function () {
            deferred.resolve(gridApi);
        }, 0);
    }
}

然后指令使用ui-grid网格菜单使用的相同服务：

angular.module('myApp')
    .directive('columnMenu', [
        'uiGridGridMenuService',
        columnMenu
    ]);

function columnMenu (uiGridGridMenuService) {
    return {
        restrict: 'E',
        scope: {
            api: '='
        },
        templateUrl: '/column-menu.html', 
        link: function (scope) {
            scope.toggle = uiGridGridMenuService.toggleColumnVisibility;

            scope.api.then(function (api) {
                scope.columns = api.grid.columns.filter((col) => !col.isRowHeader);
            });
        }
    };
}

在我看来，我将api传递给我的指令和bam！我有自己的显示/隐藏列菜单，只包含我想要的内容：

<column-menu api="gridApi"></column-menu>

这是一个完整的plunkr。

使用外部网格过滤时，如何隐藏“清除所有过滤器”网格菜单选项

3 个答案: