javascript - displayname - ui grid footer

Filtro AngularJS ng-grid-formato de filtro de texto

Question

Estoy utilizando AngularJS ng-grid ( v2.0.7 v2.0.8) y me gustaría entender la sintaxis del campo filterText en la API.

En particular, me gustaría saber cómo filtrar en una columna o columnas específicas, y filtrar una o más entradas en una columna.

Hay muchas preguntas de desbordamiento de pila con etiquetas ng-grid y filtro, y aunque son útiles, una que ofrece un resumen completo del formato de filtro de texto no está disponible actualmente.

Answer 1

Al momento de escribir este artículo, no hay un resumen sobre cómo construir la cadena ''filterText'' en general. Después de estudiar el código ng-grid.js y hacer algunas conjeturas, encontré que ''filterText'' es mucho más poderoso 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 en los datos [''registros''] puede ser algún objeto json enviado desde el backend. Una tabla de muestra podría verse así:

Tal como está, filterText está en blanco, por lo que se presentan todos los registros.

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

Buscar todos los campos en la cuadrícula

De forma predeterminada, filterText ejecuta una expresión regular en cada celda de la cuadrícula. Al escribir el carácter ''a'' se seleccionan todos los registros que tienen el carácter ''a'' en cualquier entrada (o columna) de ese registro. Al escribir ''ab'' se seleccionan 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, seleccione un indicador 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í, la ''Fecha'' de la Letra (no use el valor del campo, debe usar la fuente) va seguida de dos puntos '':'' y luego una cadena parcial. El resultado es que solo se seleccionan tres registros, los asociados con el 30 de octubre.

Vamos a ampliar la búsqueda. Para buscar el 30 de octubre o el 31 de octubre, la sintaxis es

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

donde una pipa ''|'' separa cada cadena parcial. Puede encadenar sin embargo tantos como desee. Un filtro de múltiples fechas podría verse como:

Claramente la selección es O en la naturaleza. Mi ejemplo no es bueno, sin embargo, porque los tickers y las fechas tienen caracteres separados. Por lo tanto, puede confiar en mí que solo se busque la columna Fecha o configurar su propio ejemplo. (O, mejor aún, lea la función buildSearchConditions () en ng-grid, es bastante claro en esto).

Buscar entradas en varias columnas

La búsqueda de varias columnas requiere solo 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 de la moneda.

Continuando con este ejemplo, busquemos nyt o nvda el 30 de octubre o el 31 de octubre. Eso parece como:

Lógicamente, el filtro busca (a lo largo de Ticker para nyt OR nvda ) Y (a lo largo de Date for 10-30 OR 10-31 ).

Actualizaciones de Grid

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 conjunto con el backend, actualiza los datos de la cuadrícula, los datos actualizados se insertan a través del filtro. Este es un hermoso resultado, en efecto, el filtro persiste.

Bug conocido - claro

En el momento de escribir este artículo, hay una solución reciente a un error conocido en el que la eliminación del filterText casi bloquea el navegador. El informe que he seguido es este: ng-grid número 777 . Una solución se fusionó después del problema ng-grid 848 . Definitivamente puedo confirmar que veo un bajo rendimiento cuando se borra un filtro aplicado a un gran conjunto de datos. No he probado la solución todavía.

ACTUALIZAR

Acabo de instalar ng-grid 2.0.8. El problema claro está resuelto. Funciona genial.

ng-grid 3.0

ng-grid 3.0 está en el tablero de dibujo ahora. Ya hay mucha bondad en ng-grid 2.0, pero al igual que con cualquier código que sea realmente nuevo, algunas reescrituras ayudan. Recomiendo a los desarrolladores de ng-grid que mantengan las funciones de filtro que ya han incluido y quizás amplíen el rendimiento o el rango.

Answer 2

Basándome en la respuesta de JayInNyc, hice algunas cosas para facilitar el uso del usuario en lugar de seguir esa sintaxis. Básicamente miro los campos que quiero filtrar. En este caso tengo un campo de entrada para el nombre y la ciudad.

$scope.filterOptions = {
    filterText: ''''
};
$scope.filterName = '''';
$scope.filterCity = '''';

$scope.$watch(''filterName'', function (value) {

    setFilterText();
});

$scope.$watch(''filterCity'', function (value) {

    setFilterText();
});

function setFilterText()
{
    $scope.filterOptions.filterText = ''Name: '' + $scope.filterName + '';City:'' + $scope.filterCity;
}

Por cierto, quería usar la función de compilación, pero no parecía funcionar. Tuve lo siguiente pero no funcionó.

filterOptions.filterText = $compile(''Name:{{filterName}};Category:{{filterCategory}}'')(scope);