angularjs - grillas - ui grid sort column




Angular UI Grid: cómo crear un menú desplegable rellenado previamente para el filtrado de columnas (3)

Puede poner un menú desplegable en el encabezado a través de headerCellTemplate en su columnDefs

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

mypulldownownemplate.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 () puede hacer lo que quieras que haya filtrado. Tal vez solo configurando algunas variables que use en un filtro personalizado que asigne a la cuadrícula. Puede encontrar un ejemplo de configuración de una condición en su filtro personalizado en el ui Grid Tutorial aquí filtering

Estoy buscando ayuda con respecto a una característica de la Cuadrícula de UI Angular . Específicamente, estoy explorando el filtering y aunque pude implementar la clasificación con éxito utilizando campos de texto de forma libre en mi aplicación como lo hacen en el filtering me gustaría recibir ayuda para encontrar una manera de clasificar utilizando una Menú desplegable para determinadas columnas .

Para aclarar: Por relleno previo quiero decir que me gustaría que el menú desplegable se rellene a través de mi código. Estoy bien si la solución contiene datos codificados de forma rígida, pero mi objetivo final sería que la población se integre en el conjunto de valores de datos únicos de la columna que se está ordenando :)

He visto esta funcionalidad en (por ejemplo) la interfaz de usuario de Kendo (kendodropdownlist) pero no estoy interesado en la etiqueta de precio que viene con esa solución. Me gustaría seguir con la cuadrícula UI Angular mencionada (y vinculada) arriba. En StackOverflow encontré una pregunta similar, pero desafortunadamente no parece haber tenido mucha tracción. Espero que al dar una explicación más detallada de lo que estoy buscando, reciba una respuesta más completa de la que encontré allí.

Aquí está lo que está actualmente en mi controlador:

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

} ]);

A continuación se muestra la salida - con los campos de texto de forma libre

Para este ejemplo específico, las columnas Cliente, Cantidad y Fecha actual Probablemente lo dejaría como menú desplegable de forma libre, pero realmente me gustaría poder filtrar utilizando un menú desplegable previamente completado para las transacciones (y tenerlo en mi caja de herramientas para futuros proyectos por supuesto!).

¡Gracias!


Puede usar la función de filtro selectOptions incorporada documentada aquí: filtering

Ejemplo:

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>


Una extensión de la respuesta aceptada es algo que acabo de descubrir a través de prueba y error. Puedes usar expresiones regulares en las 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' }
                    ]
                }
            },




angular-ui-grid