Estoy trabajando en una aplicación existente en la que han usado la biblioteca ag-grid para angular para la mayoría de las cuadrículas que tienen en su aplicación. Ahora el ag-grid brinda la funcionalidad para filtrar la cuadrícula en función de un valor de columna mediante el uso de la opción de filtro en el encabezado de la columna. Doy un enlace a eso https://www.ag-grid.com/angular-data-grid/filtering-overview/ . Quería implementar una función en la que podemos guardar la palabra clave de filtro que el usuario está buscando y cuando regresa a la misma cuadrícula, el filtro anterior ya está aplicado. por ejemplo https://plnkr.co/edit/?p=preview&preview aquí podemos elegir un atleta y filtrarlo yendo a la columna y buscando un valor, así que lo que quiero es que si busco 'abc' debería poder preservar eso. Hay una manera de hacer eso ? Estoy dando el colDef para el enlace de arriba
this.columnDefs = [ { field: 'athlete' }, { field: 'age', filter: 'agNumberColumnFilter', maxWidth: 100, }, { field: 'date', filter: 'agDateColumnFilter', filterParams: filterParams, }, { field: 'total', filter: false, }, ]; this.defaultColDef = { flex: 1, minWidth: 150, filter: true, }; }Se agradece cualquier tipo de ayuda, gracias :)
Para aplicar filtros existentes a ag-grid, se puede hacer configurando filterModel en gridApi.
gridApi.getFilterInstance("fieldName").setModel({ "filterType":"equals", //type of filter condition "type":"text", //Type of column [text/number/date] "filter":"value" //Value need to be applied as filter. })Del mismo modo, en el evento onFilterChanged puede capturar cambios y aplicar filtros dinámicamente.
Puede guardar el filtro aplicado utilizando Grid Event onFilterChanged . Aquí dentro puedes obtener el modelo de filtro llamando a api.getFilterModel() . En el plunkr a continuación, mostramos esto guardando el modelo de filtro en el almacenamiento local y restaurándolo aplicándolo dentro del Evento de cuadrícula en onFirstDataRendered
onFilterChanged(params) { const filterModel = params.api.getFilterModel(); localStorage.setItem('filterModel', JSON.stringify(filterModel)); } onFirstDataRendered(params) { const filterModel = JSON.parse(localStorage.getItem('filterModel')); if (filterModel) { params.api.setFilterModel(filterModel); } }Vea esto implementado en el siguiente plunkr
También puede encontrar relevantes las siguientes páginas de documentación: