Angular ui-grid - 在列菜单中移动过滤器部分答案

【问题标题】：Angular ui-grid - Moving filter section in column menuAngular ui-grid - 在列菜单中移动过滤器部分
【发布时间】：2015-10-04 00:32:40
【问题描述】：

过去几周我开始使用 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

有没有人有一个好主意来改善过滤器部分的外观和感觉？

【问题讨论】：

标签： javascript css angularjs angular-ui angular-ui-grid

【解决方案1】：

我向 ui-grid 团队提出了一个问题，他们已在路线图中添加了此功能。热切期待！

感谢团队！ GitHub Issue 3989

【讨论】：