Angular UI Grid: Как создать раскрывающееся меню для фильтрации столбцов

Я ищу некоторую помощь в отношении функции Angular UI Grid. В частности, я изучаю filtering, и хотя мне удалось успешно выполнить сортировку с использованием текстового поля свободной формы ) в моем приложении, как в примере на своем сайте Я хотел бы помочь найти способ вместо этого сортировать, используя раскрывающееся меню с предустановленным населением для определенных столбцов.

Чтобы уточнить: По умолчанию я имею в виду, что я бы хотел, чтобы раскрывающийся список был заполнен через мой код. Я в порядке, если решение содержит жестко закодированные данные, но моя конечная цель состояла бы в том, чтобы предварительная совокупность состояла из уникального набора значений данных сортируемого столбца:)

Я видел эту функциональность в (например) пользовательском интерфейсе Kendo (kendodropdownlist), но меня не интересует ценовой тег, который поставляется вместе с этим решением. Я хотел бы придерживаться Angular UI-сетки, упомянутой (и связанной) выше. В StackOverflow я нашел один аналогичный вопрос, но, к сожалению, он, похоже, не сильно тяготел. Я надеюсь, что, давая более подробное объяснение того, что я ищу, я получу более полный ответ, чем я нашел там.

Вот что находится в моем контроллере:

var simpleMessagingApp = angular.module('MainAppCtrl', [ 'ngAnimate',
                                                         'ngTouch', 'ui.grid' ]);

simpleMessagingApp.controller('CacheTableCtrl', [ '$scope', '$http',
                                                  'uiGridConstants', function($scope, $http, uiGridConstants) {
    $scope.columns = [ {
        field : 'trans_detail',
        displayName : 'Transaction'
    }, {
        field : 'cust_name',
        displayName : 'Customer'
    }, {
        field : 'quantity',
        displayName : 'Quantity',
        filters : [ {
            condition : uiGridConstants.filter.GREATER_THAN,
            placeholder : 'greater than'
        }, {
            condition : uiGridConstants.filter.LESS_THAN,
            placeholder : 'less than'
        }
        ]
    }, {
        field : 'today_date',
        displayName : 'Current Date'
    } ];
    $scope.gridOptions1 = {
            enableSorting : true,
            enableFiltering : true,
            columnDefs : $scope.columns,
            onRegisterApi : function(gridApi) {
                $scope.grid1Api = gridApi;
            }
    };

    $http.get("../services/Coherence/Cache").success(function(data) {
        $scope.gridOptions1.data = data;
    });

} ]);

Ниже представлен результат - с текстовыми полями свободной формы

В этом конкретном примере столбцы "Клиент", "Количество" и "Текущая дата" я бы, вероятно, оставил в виде выпадающих списков свободной формы, но мне бы очень хотелось, чтобы я мог фильтровать с использованием предварительно заполненного выпадающего списка для транзакций (и иметь его в моей панели инструментов для будущих проектов, конечно!).

Спасибо!

Ответы

Ответ 1

Вы можете использовать встроенную функцию фильтра selectOptions, описанную здесь: http://ui-grid.info/docs/#/tutorial/103_filtering

Пример:

angular.module('exampleApp', ['ui.grid'])
  .controller('exampleCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {
    var animals = [
      { id: 1, type: 'Mammal', name: 'Elephant' },
      { id: 2, type: 'Reptile', name: 'Turtle' },
      { id: 3, type: 'Mammal', name: 'Human' }
    ];
                                                          
    var animalTypes = [
      { value: 'Mammal', label: 'Mammal' },
      { value: 'Reptile', label: 'Reptile'}
    ];
  
    $scope.animalGrid = {
      enableFiltering: true,
      columnDefs: [
        {
          name: 'type', 
          field: 'type', 
          filter: { selectOptions: animalTypes, type: uiGridConstants.filter.SELECT }
        },
        { name: 'name', name: 'name'}
      ],
      data: animals
    };
      
  }]);

<link href="http://ui-grid.info/release/ui-grid.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>

<div ng-app="exampleApp">
  <div ng-controller="exampleCtrl">
    <h1>UI Grid Dropdown Filter Example</h1>
    <div ui-grid="animalGrid" class="grid"></div>
  </div>
</div>

Ответ 2

Вы можете поместить раскрывающееся меню в заголовок через headerCellTemplate в вашем столбцеDefs

  columnDefs: [
     {field:'myField',headerCellTempalte: 'mypulldowntemplate.html"...}
  ]

mypulldowntemplate.html

  <div ng-class="{ 'sortable': sortable }">
  <div class="ui-grid-vertical-bar">&nbsp;</div>
<div class="ui-grid-cell-contents {{col.headerClass}}" col-index="renderIndex">
    {{ col.displayName CUSTOM_FILTERS }}
    <br>
    <select ng-model="getExternalScopes().value[col.field]" ng-change="$event.stopPropagation();getExternalScopes().yourFilterFunction(col.field)">
    </select>
      
  ....

Ответ 3

У меня было такое же требование в последнее время. Я понял это сам. Вот шаги, которые я выполнил. Если вы хотите использовать фильтры в ui-grid вы можете использовать два подхода: либо использовать существующую ui-grid custom_filters, либо создать шаблон заголовка и связать его с сеткой. хорошая статья о том, как добавить выпадающие списки в ui-сетке. Основываясь на этих кодах, я настроил свои фрагменты кода. Что я делаю, так это созданный пользовательский шаблон внутри index.html.

<script type="text/ng-template" id="uiSelect">

      <ui-select-wrap>
        <label> Gender</label>
        <ui-select ng-model="MODEL_COL_FIELD" theme="selectize" ng-disabled="disabled" append-to-body="true" on-select="grid.appScope.filterTableBasedonDropDownSelect($item)">
          <ui-select-match placeholder="Select...">{{$select.selected}}</ui-select-match>
          <ui-select-choices repeat="item in col.colDef.editDropdownOptionsArray | filter: $select.search">
            <span>{{ item }}</span>
          </ui-select-choices>
        </ui-select>
      </ui-select-wrap>
    </script>

Я создал функцию под названием filterTableBasedonDropDownSelect($item), которая будет обрабатывать логику фильтрации. Обратите внимание, что при вызове функции в объявлении нормальной функции ui-grid не работает. Поскольку ui-grid имеет собственную родительскую область. поэтому вы должны вызвать свою функцию следующим образом.

on-select="grid.appScope.filterTableBasedonDropDownSelect($item)"

Затем вы можете объявить свою логику функций под контроллером.

$scope.filterTableBasedonDropDownSelect= function(item){
     $scope.gridOptions.data  = $filter('filter')($scope.jsonData,item, undefined);};

Вот мой рабочий пример.

Надеюсь, это поможет кому-то.