如何在运行时动态禁用/隐藏ui-grid列菜单项

Question

如何有条件地禁用/隐藏列的菜单项？

Answer 1

$scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
      { field: 'name', enableColumnMenu: false },
      { field: 'gender', enableHiding: false, suppressRemoveSort: true, sort: { direction: uiGridConstants.ASC } },
      {
        field: 'company',
        menuItems: [
          {
            title: 'Outer Scope Alert',
            icon: 'ui-grid-icon-info-circled',
            action: function($event) {
              this.context.blargh(); // $scope.blargh() would work too, this is just an example
            },
            context: $scope
          },
          {
            title: 'Grid ID',
            action: function() {
              alert('Grid ID: ' + this.grid.id);
            }
          },
          {
            title: 'Column Title Alert',
            shown: function () {
              return this.context.col.displayName === 'Company';
            },
            action: function() {
              alert(this.context.col.displayName);
            }
          }
        ]
      }
    ]
  };

您可以自定义列的菜单并提供自己的功能。每个菜单项可以具有：

• shown：确定是否显示项目的功能
• title：您希望为菜单项显示的标题（请注意，您也可以 通过gridMenuTitleFilter设置对此使用i18n）
• icon：您想要在商品旁边显示的图标
• action：单击菜单时将调用的函数
• active：突出显示项目的功能（具有切换类型的效果-有关示例，请参见列菜单上的排序）
• context：默认情况下，action，shown和active的上下文将引用作为网格添加的网格 属性grid（可通过this.grid访问。您可以通过提供 菜单项的context属性。可以通过this.context进行访问。