web-dev-qa-db-fra.com

Angular UI Grid: comment créer un menu déroulant pré-rempli pour le filtrage des colonnes

Je cherche de l'aide concernant une fonctionnalité de la Angular UI Grid. Plus précisément, j'explore filtrage et alors que j'ai réussi à implémenter le tri en utilisant des champs de texte de forme libre dans mon application comme ils le font dans le exemple sur leur site J'aimerais avoir de l'aide pour trouver un manière de trier à la place à l'aide d'un menu déroulant pré-rempli pour certaines colonnes .

Pour clarifier: Par pré-rempli, je veux dire que je voudrais que la liste déroulante soit remplie via mon code. Je suis d'accord si la solution contient des données codées en dur mais mon objectif final serait que la pré-population soit composée de l'ensemble de valeurs de données unique de la colonne en cours de tri :)

J'ai vu cette fonctionnalité dans (par exemple) l'interface utilisateur de Kendo (kendodropdownlist) mais je ne suis pas intéressé par le prix qui accompagne cette solution. Je voudrais rester avec le Angular UI-grid mentionné (et lié) ci-dessus. Sur StackOverflow j'en ai trouvé un question similaire mais malheureusement cela ne semble pas avoir eu beaucoup de succès. J'espère qu'en donnant une explication plus détaillée de ce que je recherche, je recevrai une réponse plus complète que je n'y ai trouvé.

Voici ce qui se trouve actuellement dans mon contrôleur:

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;
    });

} ]);

Ci-dessous la sortie - avec les champs de texte de forme libre

Example Table with free form filters

Pour cet exemple spécifique de colonnes Client, Quantité et Date actuelle, je laisserais probablement des listes déroulantes sous forme libre, mais j'aimerais vraiment pouvoir filtrer à l'aide d'une liste déroulante préremplie pour les transactions (et l'avoir dans ma boîte à outils) pour de futurs projets bien sûr!).

Merci!

angularjsdrop-down-menuangular-ui-grid
19
laurenOlga

Vous pouvez utiliser la fonction de filtre selectOptions intégrée documentée ici: http://ui-grid.info/docs/#/tutorial/103_filtering

Exemple:

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>
7
Justin Fisher

Vous pouvez mettre un menu déroulant dans l'en-tête via le headerCellTemplate dans votre columnDefs

  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>
      
  ....

yourFilterFunction () peut faire tout ce que vous voulez filtrer. Peut-être simplement en définissant certaines variables que vous utilisez dans un filtre personnalisé que vous affectez à la grille. Vous pouvez trouver un exemple de définition d'une condition dans votre filtre personnalisé sur le didacticiel de grille ui ici http://ui-grid.info/docs/#/tutorial/103_filtering

7
Scott

J'ai eu la même exigence récemment.J'ai compris moi-même.Voici les étapes que j'ai suivies.Si vous souhaitez utiliser des filtres dans i-grid vous pouvez utiliser deux approches soit utiliser ui-grid existant custom_filters ou créé un modèle d'en-tête et le lier dans la grille.Il y a un article sympa qui peut comment ajouter des listes déroulantes dans ui-grid . Sur la base de ces codes, j'ai personnalisé mon extraits de code. Ce que je fais, c'est que j'ai créé un modèle personnalisé dans 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>

J'ai créé une fonction appelée filterTableBasedonDropDownSelect($item) elle gérera la logique de filtrage. Notez que lorsque vous appelez une fonction dans ui-grid, la déclaration de fonction normale ne fonctionne pas. Parce que ui-grid a sa propre portée parent . vous devez donc appeler votre fonction comme ceci.

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

Ensuite, vous pouvez déclarer votre logique de fonction sous contrôleur.

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

Voici mon travail exemple .

J'espère que cela aidera quelqu'un.

1
gihan

Une extension de la réponse acceptée est quelque chose que je viens de découvrir par essais et erreurs. Vous pouvez utiliser des expressions régulières dans le selectOptions:

           columnDefs: [
            {
                name: 'starRating',
                headerCellClass: 'blue',
                headerTooltip: 'Star Rating',
                maxWidth: 100, 
                filter:
                {
                    type: uiGridConstants.filter.SELECT,
                    selectOptions: [
                        { value: /(THREE|FOUR|FIVE)/, label: 'Positive' },  // Here I wanted the user to be able to choose one option that would filter by several of the possible values in the data set
                        { value: /(ONE|TWO)/, label: 'Negative' },  // ...and Here
                        { value: 'ONE', label: '1' },
                        { value: 'TWO', label: '2' },
                        { value: 'THREE', label: '3' },
                        { value: 'FOUR', label: '4' },
                        { value: 'FIVE', label: '5' }
                    ]
                }
            },
0
Adam Hey