angularjs - grillas - ui grid resize columns

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

Question

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!

Answer 1

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

Answer 2

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>

Answer 3

Recientemente tuve el mismo requisito. Lo he averiguado yo mismo. Estos son los pasos que he seguido. Si desea utilizar filtros en ui-grid , puede utilizar dos enfoques: use los custom_filters ui-grid custom_filters o creó una plantilla de encabezado y únalo a la cuadrícula. Hay un buen artículo que explica cómo puedo agregar elementos desplegables en la interfaz de usuario. En función de esos códigos, he personalizado mis fragmentos de código. Lo que hago es crear una plantilla personalizada dentro de 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>

He creado una función llamada filterTableBasedonDropDownSelect($item) que manejará la lógica de filtrado. Tenga en cuenta que cuando llama a una función en la declaración de función normal de ui-grid no funciona. Porque ui-grid tiene su propio alcance padre . así que deberías llamar a tu función así.

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

Entonces puede declarar su lógica de función bajo el controlador.

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

Aquí está mi example trabajo.

Espero que esto ayude a alguien.

Answer 4

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'' }
                    ]
                }
            },