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

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

Answer 1

我在ui-grid团队中创建了一个问题，他们已在路线图中添加了此功能。急切地等待它！

谢谢团队！ GitHub Issue 3989

角度ui-grid - 列菜单中的移动过滤器部分

1 个答案: