AngularJS ng-grid filter-filterText format

En el momento de escribir esto no hay un resumen sobre cómo construir la cadena 'filterText' en general. Después de estudiar el ng-grid.he encontrado que 'filterText' es mucho más potente y expresivo de lo que sugiere la documentación actual.

Ejemplo de configuración

Para configurar la respuesta, primero considere una cuadrícula con la siguiente definición, ubicada en algún controlador:

  $scope.pricing_data = data['records'];

  $scope.gridOptions = { 
    data: 'pricing_data',
    columnDefs: [
      { field: 'ticker', displayName: 'Ticker' },
      { field: 'date',   displayName: 'Date'   },
      { field: 'close',  displayName: 'Close'  },
      { field: 'volume', displayName: 'Volume' }
    ],
    filterOptions: {filterText: '', useExternalFilter: false},
    showFilter: true
  };

El objeto at data ['records'] puede ser algún objeto json enviado desde el backend. Una tabla de ejemplo podría tener este aspecto:

Tal como está, filterText está en blanco para que se presenten todos los registros.

La zanahoria hacia abajo en la parte superior derecha de la cuadrícula es visible porque showFilter es true. Al hacer clic en la zanahoria hacia abajo se muestra una entrada que está vinculada a la variable 'filterText'. Para esta discusión voy a mostrar algunos resultados utilizando este menú desplegable, pero generalmente se puede asignar directamente a filterText en el código del controlador. El menú desplegable se ve como esto:

Buscar todos los campos en Grid

De forma predeterminada, filterText ejecuta una expresión regular contra cada celda de la cuadrícula. Escribir el carácter ' a 'selecciona todos los registros que tienen el carácter' a ' en cualquier entrada (o columna) de ese registro. Escribir ' ab ' selecciona todos los registros que tienen la secuencia de caracteres 'ab' en cualquier entrada de ese registro. Dependiendo de sus necesidades, este comportamiento puede ser perfectamente adecuado. Sin embargo, con grandes conjuntos de datos, uno normalmente quiere filtrar en columnas en lugar de toda la cuadrícula debido a la naturaleza de los datos (por ejemplo, seleccionar un ticker de precio) y debido al alto costo de buscar en toda la cuadrícula.

Buscar Por Columna

Para buscar una cadena o expresión regular en una sola columna, la sintaxis de filterText es:

filterText = '<displayName>:<literal>'

Por ejemplo,

Aquí el DisplayName 'Date' (no use el valor del campo, debe usar DisplayName) es seguido por dos puntos ':' y luego una cadena parcial. El resultado es que solo se seleccionan tres registros, los asociados con el 30 de octubre.

Expandamos la búsqueda. Para buscar Oct 30th o Oct 31st, la sintaxis es

filterText = '<displayName>:<literal 1>|<literal 2>|...'

Donde una tubería '|' separa cada cadena parcial. Puedes encadenar sin embargo tantas como quieras. Un filtro de varias fechas podría tener el siguiente aspecto:

Claramente la selección es O en naturaleza. Mi ejemplo no es genial, sin embargo, porque los tickers y las fechas tienen caracteres disjuntos. Así que puedes confíe en que solo se busca la columna de Fecha o configure su propio ejemplo. (O, mejor aún, lea la función buildSearchConditions () en ng-grid, es bastante claro en esto).

Buscar entradas en Múltiples columnas

Buscar varias columnas solo requiere una extensión de sintaxis de la búsqueda dentro de una columna. Esta sintaxis es:

filterText = '<displayName 1>:<lit 1>[|<lit 2>|..];<displayName 2>:<lit a>[|<lit b>|..][;..]'

El elemento léxico operativo es el punto y coma ';' que separa cada columna DisplayName.

Continuando con esto por ejemplo, busquemos nyt o nvda el 30 de octubre o el 31 de octubre.]}

Lógicamente, el filtro busca (a lo largo del Ticker para nyt O nvda) AND (along Date for 10-30 O 10-31).

Actualizaciones de cuadrícula

No estoy muy familiarizado con las actualizaciones que provienen de las ediciones de celdas. Supongo que el resultado es el mismo.

Cuando el controlador angular-js, trabajando en conjunción con el backend, actualiza los datos de la cuadrícula, luego los datos actualizados se empujan a través de el filtro. Este es un resultado hermoso, en efecto, el filtro persiste.

Error conocido Clear Clear

En el momento de escribir este artículo hay una corrección reciente a un error conocido en el que borrar el texto del filtro casi o de hecho cuelga el navegador. El informe que he seguido es este: ng-grid issue 777 . Se fusionó una solución tras ng-grid issue 848. Definitivamente puedo confirme que veo un rendimiento deficiente cuando se borra un filtro aplicado a un conjunto de datos grande. Aún no he probado la solución.

UPDATE

Acabo de instalar ng-grid 2.0.8. El problema claro se soluciona afaict. Funciona muy bien.

Ng-grid 3.0

Ng-grid 3.0 está en el tablero de dibujo ahora. Hay tanta bondad en ng-grid 2.0 ya, pero como cualquier código que es realmente nuevo, algunas reescrituras ayudan. Animo a los desarrolladores de ng-grid a mantener el filtro características que ya han incluido y tal vez ampliar el rendimiento o el rango.