angular-ui-grid - 使用外部网格过滤时，如何隐藏 `Clear All Filters` 网格菜单选项

Question

目前，我的 ui 网格有外部过滤器，但有 enableFiltering: true所以我仍然可以使用 filter我的列上的属性(也许这是错误的，我不知道，但是 ui-grid 过滤 API 工作得很好，所以我不想搞砸它)。

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

我尝试过使用uiGridGridMenuService.removeFromGridMenu(grid, id)取消注册菜单选项，但这在第一次渲染网格时不起作用，因为 grid.gridMenuScope.menuItems直到用户第一次单击网格菜单按钮之前，属性甚至都没有定义。此外，此菜单项的 ID 为 menuitem-0。而不是一些静态/唯一的属性，因此即使删除确实有效 - 这也不是删除它的安全方法。最后，根据下面的代码并运行调试器，getMenuItems每次单击网格菜单按钮时都会执行调用，因此每次都会添加清除过滤器选项。

看起来没有任何方法可以 1) 阻止此菜单选项出现，除非不使用网格的过滤 API，或者 2) 覆盖菜单操作。

这是网格菜单按钮的指令代码(注意 $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();
  });
});