Фильтр
Функция фильтра позволяет отбирать данные в электронных таблицах, чтобы быстро находить и анализировать нужную информацию. Поддержка различных условий и операций фильтрации помогает эффективнее обрабатывать данные.
Фильтр и сортировка учебного плана
Отберите курсы и отсортируйте их по прогрессу. Идентификатор помогает найти ту же запись.
| ID записи | Курс | Прогресс |
|---|---|---|
| 1 | Sheets | 86% |
| 2 | Docs | 100% |
| 3 | Slides | 64% |
| 4 | Bases | 92% |
| 5 | Boards | 48% |
| 6 | PDFs | 78% |
Видимые записи: 6 / 6
Фильтр скрывает записи, а сортировка меняет порядок. Снимите фильтр, чтобы снова увидеть все записи.
Режим плагинов
Установка
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-uiИспользование
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)Плагины и настройка
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 }}Поддержка мобильных устройств
Сначала настройте мобильный редактор. В коде инициализации режима плагинов на этой странице замените указанные настольные регистрации мобильными экспортами тех же пакетов до открытия документа. Сохраните модели, стили, локализации и импорты Facade; не регистрируйте оба варианта.
| Пакет | Настольная регистрация | Мобильная регистрация |
|---|---|---|
@univerjs/sheets-filter-ui | UniverSheetsFilterUIPlugin | UniverSheetsFilterMobileUIPlugin |
Режим предустановок
Установка
Shell
pnpm add @univerjs/preset-sheets-filterShell
npm install @univerjs/preset-sheets-filterShell
yarn add @univerjs/preset-sheets-filterShell
bun add @univerjs/preset-sheets-filterИспользование
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(), ],})Предустановки и настройка
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 }}Facade API
Полные определения типов Facade API доступны в разделе FacadeAPI.
Импорт
Примечание о режиме плагинов
Импортировать пакет Facade вручную нужно только в режиме плагинов. В режиме предустановок соответствующий пакет Facade уже включён, поэтому дополнительный импорт не требуется.
TypeScript
import '@univerjs/sheets-filter/facade'Получение фильтра
Возвращает объект FFilter. Если на листе нет фильтра, возвращает null.
- Для объекта
FWorksheetиспользуйтеgetFilter() - Для объекта
FRangeиспользуйтеgetFilter()
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()Создание фильтра
Создаёт объект FFilter. Если на листе уже есть фильтр, возвращает null.
- Для объекта
FRangeиспользуйтеcreateFilter()
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()Удаление фильтра
Метод FFilter.remove() удаляет фильтр с листа.
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()fWorksheet.getFilter()?.remove()Получение критерия фильтрации столбца
Метод FFilter.getColumnFilterCriteria(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'], },})// Print the filter criteria of the column C and DfFilter.getColumnFilterCriteria(column) // { colId: 0, filters: { filters: ['1', '5', '9'] } }fFilter.getColumnFilterCriteria(column + 1) // undefinedЗадание критерия фильтрации столбца
Метод FFilter.setColumnFilterCriteria(column, criteria) задаёт критерий фильтрации указанного столбца.
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'], },})Удаление критериев фильтрации столбцов
- Метод
FFilter.removeColumnFilterCriteria(column)удаляет критерий фильтрации указанного столбца. - Метод
FFilter.removeFilterCriteria()удаляет критерии фильтрации всех столбцов.
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)Получение отфильтрованных строк
Метод FFilter.getFilteredOutRows() возвращает массив с индексами строк, исключённых фильтром.
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]Обработчики событий
Полные определения типов событий доступны в разделе События.
Событие SheetRangeFiltered возникает при изменении критерия фильтрации столбца.
TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.SheetRangeFiltered, (params) => { const { workbook, worksheet, col, criteria } = params})// Remove the event listener, use `disposable.dispose()`Событие SheetBeforeRangeFilter возникает перед изменением критерия фильтрации столбца.
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()`Событие SheetRangeFilterCleared возникает при очистке критерия.
TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.SheetRangeFilterCleared, (params) => { const { workbook, worksheet } = params})// Remove the event listener, use `disposable.dispose()`Событие SheetBeforeRangeFilterClear возникает перед очисткой критерия.
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()`Насколько полезно это руководство?