Angular ui-grid - 将过滤器部分移动到列菜单中

Question

我最近开始使用ui-grid。列过滤器非常好用，但我想让它的外观更加美观。有没有办法将过滤选项移动到列菜单中？

$scope.gridOptions = {
    enableFiltering: true,
    enableSorting: true,
    columnDefs: [
      { field: 'name', enableColumnMenu: false,
        filters: [
          {
            condition: uiGridConstants.filter.STARTS_WITH,
            placeholder: 'Starts with'
          },
          {
            condition: uiGridConstants.filter.CONTAINS,
            placeholder: 'contains'
          }
        ]
      },
      { 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();
            },
            context: $scope
          },
          {
            title: 'Grid ID',
            action: function() {
              alert('Grid ID: ' + this.grid.id);
            }
          },
          {
            title: 'Better to have filter options here!',
            action: function() {
              alert(this.context.col.displayName);
            }
          }
        ]
      }
    ]
  };

Fiddle 1

此外，我试图定位筛选器部分，以便在用户需求时将其放在下拉菜单中。但这会在水平滚动条存在时破坏网格表头。

.ui-grid-top-panel, .ui-grid-header-viewport{ overflow: visible;}
.listview-header.ui-grid-header-cell { overflow: visible; }
.listview-header.ui-grid-header-cell div[ui-grid-filter]{ position:absolute; right:0; width:125px; background-color:#eee; border:1px solid #ddd; z-index:1; }

Fiddle 2

有没有好的想法来改善筛选部分的外观和感觉？

- moustacheman

Answer 1

我已经向ui-grid团队创建了一个问题，他们已将此功能添加到其路线图中。迫不及待地等待它的到来！感谢团队！GitHub Issue 3989

- moustacheman