Filtro
La función Filtro permite a los usuarios filtrar datos en hojas de cálculo para encontrar y analizar rápidamente información específica. Admite varias condiciones y operaciones de filtrado, lo que ayuda a los usuarios a procesar datos de manera más eficiente.
Filtrar y ordenar un plan de estudio
Filtra los cursos y ordénalos por progreso. Sigue cada registro mediante su ID.
| ID del registro | Curso | Progreso |
|---|---|---|
| 1 | Sheets | 86% |
| 2 | Docs | 100% |
| 3 | Slides | 64% |
| 4 | Bases | 92% |
| 5 | Boards | 48% |
| 6 | PDFs | 78% |
Registros visibles: 6 / 6
El filtro oculta registros; la ordenación cambia su posición. Quita el filtro para verlos todos.
Modo de complemento
Instalación
Shell
pnpm add @univerjs/sheets-filter @univerjs/sheets-filter-uiShell
npm install @univerjs/sheets-filter @univerjs/sheets-filter-uiShell
yarn add @univerjs/sheets-filter @univerjs/sheets-filter-uiShell
bun add @univerjs/sheets-filter @univerjs/sheets-filter-uiUso
TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverSheetsFilterPlugin } from '@univerjs/sheets-filter'import { UniverSheetsFilterUIPlugin } from '@univerjs/sheets-filter-ui'import SheetsFilterUIEnUS from '@univerjs/sheets-filter-ui/locale/en-US'import '@univerjs/sheets-filter-ui/lib/index.css'import '@univerjs/sheets-filter/facade'const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( SheetsFilterUIEnUS, ), },})univer.registerPlugin(UniverSheetsFilterPlugin)univer.registerPlugin(UniverSheetsFilterUIPlugin)Complementos y configuración
TypeScript
interface IUniverSheetsFilterConfig { /** * Whether to display the filter sync switch in the filter panel. * This configuration can be used in a collaboration scenario to allow users to choose whether to enable filter synchronization. * If set to a defaultValue object, the filter sync switch will be displayed and its initial state will be determined by the defaultValue property. * @default false */ enableSyncSwitch?: boolean | { defaultValue: boolean }}Compatibilidad móvil
Configure primero el editor móvil. En la inicialización en modo plugin de esta página, sustituya los registros de escritorio siguientes por las exportaciones móviles de los mismos paquetes antes de abrir un documento. Conserve modelos, estilos, traducciones e importaciones Facade; no registre ambas variantes.
| Paquete | Registro de escritorio | Registro móvil |
|---|---|---|
@univerjs/sheets-filter-ui | UniverSheetsFilterUIPlugin | UniverSheetsFilterMobileUIPlugin |
Modo preestablecido
Instalación
Shell
pnpm add @univerjs/preset-sheets-filterShell
npm install @univerjs/preset-sheets-filterShell
yarn add @univerjs/preset-sheets-filterShell
bun add @univerjs/preset-sheets-filterUso
TypeScript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { UniverSheetsFilterPreset } from '@univerjs/preset-sheets-filter'import UniverPresetSheetsFilterEnUS from '@univerjs/preset-sheets-filter/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'import '@univerjs/preset-sheets-filter/lib/index.css'const { univerAPI } = createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( UniverPresetSheetsCoreEnUS, UniverPresetSheetsFilterEnUS, ), }, presets: [ UniverSheetsCorePreset(), UniverSheetsFilterPreset(), ],})Preajustes y configuración
TypeScript
interface IUniverSheetsFilterPresetConfig { /** * Whether to display the filter sync switch in the filter panel. * This configuration can be used in a collaboration scenario to allow users to choose whether to enable filter synchronization. * If set to a defaultValue object, the filter sync switch will be displayed and its initial state will be determined by the defaultValue property. * @default false */ enableSyncSwitch?: boolean | { defaultValue: boolean }}API de Facade
Las definiciones completas del tipo de API de Facade se pueden encontrar en FacadeAPI.
Importación
Plugin mode note
Solo el modo de complemento requiere importar manualmente el paquete de Facade. El modo Preestablecido ya incluye el paquete Facade correspondiente, por lo que no se necesita ninguna importación adicional.
TypeScript
import '@univerjs/sheets-filter/facade'Obtener filtro
Devuelve un objeto FFilter. Si la hoja no tiene filtro, devuelve null.
- En el objeto
FWorksheet, usegetFilter() - En el objeto
FRange, usegetFilter()
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()// Get filter from FWorksheetconst fWorksheet = fWorkbook.getActiveSheet()const fFilter = fWorksheet.getFilter()fFilter?.getRange().getA1Notation()// Get filter from FRangeconst fRange = fWorksheet.getRange('A1:D14')const fFilter2 = fRange.getFilter()fFilter2?.getRange().getA1Notation()Crear filtro
Crea un objeto FFilter. Si la hoja ya tiene un filtro, devuelve null.
- En el objeto
FRange, usecreateFilter()
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const fRange = fWorksheet.getRange('A1:D14')let fFilter = fRange.createFilter()// If the worksheet already has a filter, remove it and create a new filter.if (!fFilter) { fWorksheet.getFilter().remove() fFilter = fRange.createFilter()}fFilter.getRange().getA1Notation()Eliminar filtro
FFilter.remove() elimina el filtro de la hoja de trabajo.
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()fWorksheet.getFilter()?.remove()Obtener criterios de filtro de columna
El método FFilter.getColumnFilterCriteria(column) devuelve los criterios de filtro de la columna especificada.
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Set some values of the range C1:F10const fRange = fWorksheet.getRange('C1:F10')fRange.setValues([ [1, 2, 3, 4], [2, 3, 4, 5], [3, 4, 5, 6], [4, 5, 6, 7], [5, 6, 7, 8], [6, 7, 8, 9], [7, 8, 9, 10], [8, 9, 10, 11], [9, 10, 11, 12], [10, 11, 12, 13],])// Create a filter on the range C1:F10let fFilter = fRange.createFilter()// If the filter already exists, remove it and create a new oneif (!fFilter) { fRange.getFilter().remove() fFilter = fRange.createFilter()}// Set the filter criteria of the column C, filter out the rows that are not 1, 5, 9const column = fWorksheet.getRange('C:C').getColumn()fFilter.setColumnFilterCriteria(column, { colId: 0, filters: { filters: ['1', '5', '9'], },})// Print the filter criteria of the column C and DfFilter.getColumnFilterCriteria(column) // { colId: 0, filters: { filters: ['1', '5', '9'] } }fFilter.getColumnFilterCriteria(column + 1) // undefinedEstablecer criterios de filtro de columna
El método FFilter.setColumnFilterCriteria(column, criteria) establece los criterios de filtro de la hoja de trabajo especificada column.
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Set some values of the range C1:F10const fRange = fWorksheet.getRange('C1:F10')fRange.setValues([ [1, 2, 3, 4], [2, 3, 4, 5], [3, 4, 5, 6], [4, 5, 6, 7], [5, 6, 7, 8], [6, 7, 8, 9], [7, 8, 9, 10], [8, 9, 10, 11], [9, 10, 11, 12], [10, 11, 12, 13],])// Create a filter on the range C1:F10let fFilter = fRange.createFilter()// If the filter already exists, remove it and create a new oneif (!fFilter) { fRange.getFilter().remove() fFilter = fRange.createFilter()}// Set the filter criteria of the column C, filter out the rows that are not 1, 5, 9const column = fWorksheet.getRange('C:C').getColumn()fFilter.setColumnFilterCriteria(column, { colId: 0, filters: { filters: ['1', '5', '9'], },})Eliminar criterios de filtro de columna
- El método
FFilter.removeColumnFilterCriteria(column)elimina los criterios de filtro de la columna especificada. - El método
FFilter.removeFilterCriteria()elimina los criterios de filtro de todas las columnas.
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Set some values of the range C1:F10const fRange = fWorksheet.getRange('C1:F10')fRange.setValues([ [1, 2, 3, 4], [2, 3, 4, 5], [3, 4, 5, 6], [4, 5, 6, 7], [5, 6, 7, 8], [6, 7, 8, 9], [7, 8, 9, 10], [8, 9, 10, 11], [9, 10, 11, 12], [10, 11, 12, 13],])// Create a filter on the range C1:F10let fFilter = fRange.createFilter()// If the filter already exists, remove it and create a new oneif (!fFilter) { fRange.getFilter().remove() fFilter = fRange.createFilter()}// Set the filter criteria of the column C, filter out the rows that are not 1, 5, 9const column = fWorksheet.getRange('C:C').getColumn()fFilter.setColumnFilterCriteria(column, { colId: 0, filters: { filters: ['1', '5', '9'], },})// Clear the filter criteria of the column C after 3 secondssetTimeout(() => { fFilter.removeColumnFilterCriteria(column) // Or use fFilter.removeFilterCriteria() to remove all column filter criteria}, 3000)Obtener filas filtradas
El método FFilter.getFilteredOutRows() devuelve una matriz que contiene los índices de las filas que se filtran.
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Set some values of the range C1:F10const fRange = fWorksheet.getRange('C1:F10')fRange.setValues([ [1, 2, 3, 4], [2, 3, 4, 5], [3, 4, 5, 6], [4, 5, 6, 7], [5, 6, 7, 8], [6, 7, 8, 9], [7, 8, 9, 10], [8, 9, 10, 11], [9, 10, 11, 12], [10, 11, 12, 13],])// Create a filter on the range C1:F10let fFilter = fRange.createFilter()// If the filter already exists, remove it and create a new oneif (!fFilter) { fRange.getFilter().remove() fFilter = fRange.createFilter()}// Set the filter criteria of the column C, filter out the rows that are not 1, 5, 9const column = fWorksheet.getRange('C:C').getColumn()fFilter.setColumnFilterCriteria(column, { colId: 0, filters: { filters: ['1', '5', '9'], },})// Print the filtered out rowsfFilter.getFilteredOutRows() // [1, 2, 3, 5, 6, 7, 9]Evento Oyentes
Las definiciones completas de los tipos de eventos se pueden encontrar en Eventos.
El evento SheetRangeFiltered se activa cuando cambian los criterios del filtro de columnas.
TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.SheetRangeFiltered, (params) => { const { workbook, worksheet, col, criteria } = params})// Remove the event listener, use `disposable.dispose()`El evento SheetBeforeRangeFilter se activa antes de que cambien los criterios del filtro de columnas.
TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.SheetBeforeRangeFilter, (params) => { const { workbook, worksheet, col, criteria } = params // Cancel the filter criteria change operation params.cancel = true})// Remove the event listener, use `disposable.dispose()`El evento SheetRangeFilterCleared se activa cuando los criterios se borra.
TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.SheetRangeFilterCleared, (params) => { const { workbook, worksheet } = params})// Remove the event listener, use `disposable.dispose()`El evento SheetBeforeRangeFilterClear se activa antes de que se borre el criterio.
TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.SheetBeforeRangeFilterClear, (params) => { const { workbook, worksheet } = params // Cancel the filter clear operation params.cancel = true})// Remove the event listener, use `disposable.dispose()`¿Cómo es esta guía?