Angular ui-grid - перемещение секции фильтра в меню колонок

Я начал использовать 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);
            }
          }
        ]
      }
    ]
  };

Скрипка 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; }

Скрипка 2

У кого-нибудь есть хорошая идея улучшить внешний вид раздела фильтра?

1 ответ

Я создал проблему с командой UI-Grid, они добавили эту функцию в свою дорожную карту. С нетерпением жду этого!

Спасибо команде! GitHub Issue 3989

Другие вопросы по тегам