Настраиваемый фильтр в excel - Учим Эксель

Фильтрация и сортировка частей на javascript

Фильтрация и сортировка элементов на javascript

Всем привет, сейчас побеседуем о том, какие методы сортировки и фильтрации частей (к примеру, продукты в веб магазине) есть. Мощные и слабенькие стороны разных реализаций.

В данной статье мы напишем на javascript фильтр продуктов и их сортировку без перезагрузки странички.

Так же я покажу некие подводные камешки, возникающие при организации фильтрации частей.

Давайте определимся с некими определениями:

Фильтрация — это подборка каких-то частей из базы данных по определенным характеристикам. При всем этом элементы не пригодные под данные характеристики будут укрыты.

Сортировка — это размещение частей на страничке в определенном порядке, к примеру, по возрастанию цены. В этом случае, в начале перечня будут показаны самые дешевенькие продукты, а уже ниже будут продукты подороже.

Когда-то давным издавна

Когда-то давным издавна, когда javascript употреблялся лишь для анимаций и слайдеров, все манипуляции с данными производили на стороне сервера.

К примеру, для того, чтоб отфильтровать продукты человек заполнял фильтр, который представлял из себя форму с несколькими полями и надавливал клавишу “Показать”. Дальше страничка перезагружалась и мы лицезрели продукты, попадающие в рамки фильтра.

Механизм работы фильтра в этом случае заключался в последующем:

  • При нажатии на клавишу “Показать” на сервер уходил POST либо GET запрос, содержащий аспекты фильтра.
  • Серверный скрипт, обрабатывающий этот запрос, анализировал его и высылал запрос в базу данных.
  • Получив ответ от базы данных, скрипт высылал юзера на специальную страничку либо перезагружал существующую, на которой и выводился итог поиска.

Приблизительно по такому же принципу происходила и сортировка продуктов, к примеру, по возрастанию либо убыванию цены. Лишь нас не перебрасывали на новейшую страничку, а перезагружали существующую. При всем этом демонстрируя все продукты просто в определенном порядке.

У такового подхода есть большенный минус — для каждой фильтрации либо сортировки необходимо было перезагружать страничку. А при неспешном вебе любая новенькая перезагрузка вызывает у юзера лишь раздражение.

Фильтр продуктов на javascript

С развитием интернет технологий был выдуман метод организации фильтра продуктов на javascript c помощью Ajax.

Снаружи фильтр все так же смотрится в виде формы с несколькими полями и клавишей внедрения фильтра. Незначительно поменялась только логика его работы:

  • Юзер заполняет поля фильтра и надавливает клавишу “Применить”.
  • Скрипт, написанный уже на javascript срабатывает по событию нажатия клавиши и посылает Ajax запрос на сервер, демонстрируя при всем этом индикатор загрузки (спинер).
  • Серверный скрипт обрабатывает запрос и на его базе делает запрос к базе данных с продуктами.
  • Дальше сервер посылает ответ, в котором содержится перечень продуктов, попадающих в рамки фильтра.
  • Javascript прячет спиннер и на базе ответа от сервера указывает приобретенные продукты.

Используя этот метод нет необходимости перезагружать страничку. С сервера приходят данные и на веб-сайте мы перерисовываем лишь перечень продуктов. Это не только лишь сберегает трафик, да и ускоряет работу веб-сайта.

Возможно обойтись и без Ajax. В этом случае все продукты должны быть загружены на страничку и фильтрация делается лишь посреди их. Логика выходит совершенно обычная — продукты не пригодные под фильтр мы просто скрываем. Единственное, у такового подхода могут быть препядствия с версткой:

В данном примере отфильтруйте элементы, оставив лишь красноватые блоки. Видите ли, верстка, в этом случае, “плывет”. Это происходит из-за того, что блоки перестроились только зрительно, а в DOM дереве их положение не поменялось.

Решений у данной препядствия несколько:

  • Перестраивать DOM дерево, чтоб блоки пригодные под фильтр передвигались в начало DOM дерева.
  • Пользоваться скриптом, который организует сетку для продуктов без помощи других.
  • Переписать верстку на Flexbox.

Давайте разберем все методы по порядку

Перестраивание DOM дерева

В вебе можно отыскать огромное количество методов, как отсортировать элементы в DOM дереве. Я же предпочитаю воспользоваться маленьким jQuery плагином sortElements

Скрипт для организации сетки

Таковых скриптов я понимаю два — Masonry и Isotope . Эти скрипты весьма животрепещущи в том случае, если фильтруемые блоки имеют разную высоту. Вот вам наглядный пример использования Masonry:

Направьте внимание на 2 новейших блока снутри row :

grid-sizer нужно задать такую же ширину, как и нашим блокам item .
gutter-sizer нужно задать ширину, равную расстоянию меж нашими блоками, т.е. 25px .

Интересно почитать:  Как скопировать лист эксель из одного документа в другой

А при нажатии на клавишу фильтрации, Masonry нужно обновить:

Переписать верстку на Flexbox

Как Вы сможете увидеть, верстка при фильтрации не ломается. Но если в нижнем ряду будет 2 элемента, то они будут поровну разделять все место родителя. А если остается лишь один элемент, то он поместиться в центре родительского блока.

Сортировка продуктов на javascript

Как мы уже знаем из определения, сортировка — это размещение частей в определенном порядке. В нашем случае сортировать мы будем разноцветные продукты. Результатом нашей сортировки будет перемещение всех бардовых продуктов в начало перечня. При всем этом никакие блоки мы сейчас скрывать не будем

Сортировка продуктов вероятна как на стороне сервера, так и на стороне клиента. В этом случае мы разглядим сортировку на клиенте, т.е. на javascript.

  • Сортировка продуктов по стоимости, при помощи конфигурации DOM дерева:

Как видно из примера, мы пользовались этим же плагином sortElements для организации сортировки.

  • Сортировка продуктов по стоимости при помощи Isotope:

Видите ли, сортировка при помощи Isotope делается с приятной анимацией.

Давайте разберем этот пример наиболее детально. Верстка фактически не различается от других примеров, кроме того, что стоимость сейчас помещена в особый тег p с классом number :

Стили перешли вполне из примера с Masonry, единственное, что добавились правила для нашего параграфа с ценой:

И в конце концов сам скрипт:

В Isotope masonry является одним из вариантов лейоута, потому указываем его в настройке

Дальше идет настройка:

В какой мы указываем скрипту, по какому значению будем сортировать перечень продуктов. Сортировать мы будем по тому, что находится снутри класса number , а так же, мы приведем это к числу при помощи parseInt .

Дальше идут обработчики кликов на клавиши. Необходимо отметить, что поле sortAscending отвечает конкретно за порядок сортировки. По дефлоту оно установлено в true и сортирует в порядке 1,2,3,4,5, а если поставить его в false , то сортировка будет в оборотном направлении. Лишь не забудьте указать параметр sortAscending в обоих вариантах, потому что автоматом он не переключается.

Наиболее подробную информацию Вы отыщите в [ Документации ]

Заключение

В данной статье я сказал каким образом можно фильтровать и сортировать элементы на стороне клиента.

Если Для вас приглянулась статья, то сможете поделиться ей в соц сетях.

Если что-то не сообразили либо есть какие-то вопросцы, то пишите комменты, я постараюсь посодействовать.

Принципиально держать в голове, что все примеры в статье являются демо и не претендуют быть самыми наилучшими =)

Фильтрация данных: операции, предназначение, примеры

Содержащаяся в электрических таблицах и БД информация не постоянно нужна юзеру в любой момент его работы в полном объеме. Потому в приложениях MS Office предусмотрены инструменты, дозволяющие представить информацию в пригодном для обработки виде. В статье ознакомимся с некими из их.

Что же все-таки это такое и для что

Один из таковых инструментов – фильтрация данных. Ее употребляют для того, чтоб из всего массива отобрать лишь те записи, что соответствуют нужным условиям. При всем этом вся информация объекта сохраняется, но человек лицезреет лишь нужные ему строчки, другие же, не удовлетворяющие данным условиям, скрываются.

Фильтр в Excel

Отбор делается по одному либо нескольким условиям при установке ограничений на несколько полей. Каждое следующее ограничение добавляется к уже имеющимся, и количество отображаемой инфы миниатюризируется, еще наиболее облегчая работу с массивом.

Во всех современных электрических таблицах и базах предусмотрена возможность нахождения записей. Потому что приложения пакета MS Office являются более всераспространенными в офисной работе, нам следует наиболее тщательно ознакомиться с работой фильтров в этих программках.

Excel

В Excel фильтрация данных доступна несколькими методами. Она осуществляется по содержимому столбцов таблиц в зависимости от типа. При всем этом отбираются определенные значения ячеек либо по условиям. Условия выбора строк тоже зависят от того, информация какого типа содержатся в столбце.

Простой метод селекции – инструмент панели «Редактирование» вкладки «ГЛАВНАЯ». Выделяем ячейку столбца, в выпадающем перечне клавиши «Сортировка и фильтр» избираем пункт меню «Фильтр». При всем этом в первой ячейке столбца покажется клавиша со стрелочкой, при нажатии на которую раскрывается выпадающее меню инструментов для сортировки и фильтрации данных в Excel.

Интересно почитать:  Как в эксель распечатать на одной странице

Тут определяются характеристики выбора строк для отображения.

Выбор по значениям

Простой фильтр

Для примера воспользуемся таблицей Excel – прайс-листом магазина косметики. Самый обычный вид селекции – по значению. В листе цен есть поле «Тип косметики». Мы желаем поглядеть все имеющиеся средства по уходу за ногтями. В выпадающем перечне поля – список вероятных характеристик, посреди которых есть элемент «Для ногтей». Если перечень частей столбца очень длиннющий, воспользуйтесь полем для поиска. Снимаем флажки со всех других пт, не считая искомого, и жмем «ОК». Видимыми остались лишь косметические средства для ногтей.

Можно еще наиболее уменьшить перечень продукции, отобрав, например, лишь изделия производителя «MAX FACTOR» и получив в итоге лист средств для ногтей этого производителя.

Результат простого фильтра

Выбор по условию

Как сейчас показать все средства для волос, если посреди типов продукции есть несколько таковых видов: бальзамы, маски, гели и т.п.? Можно выделить несколько позиций флагами, а можно задать фильтрацию данных по условию по типу поля.

В нашем случае столбец содержит текст, и к нему используются текстовые характеристики. Юзер задает строчку для поиска в наименованиях. При всем этом содержимое ячейки равняется к строке поиска либо исключается из него. Есть возможность нахождения записей, текст в которых начинается с обозначенных знаков либо завершается ими, содержит их либо не содержит. Для задания наиболее сложных критерий предлагается настроить свои правила.

Тут задается несколько критерий. Они все могут быть неотклонимы к выполнению, или довольно ублажения лишь неких из их (характеристики «И» и «ИЛИ»). В построителе предусмотрена возможность установки критерий для разных типов: текстовых, числовых, даты и времени, логических и т.д.

Настраиваемый фильтр

Комфортным является таковой метод фильтрации данных в MS Excel для числовых полей. Допустим, в нашем прайс-листе мы захотим отыскать средства для губ со стоимостью до 300-т рублей. В столбце «Тип косметики» избираем флагами две позиции: «ПОМАДА» и «БЛЕСК ДЛЯ ГУБ».

В столбце «Стоимость» избираем позицию «Числовые фильтры», в отличие от текстовых в столбце с типом косметики.

Избираем из вариантов пункт «меньше либо равно» и в открывшемся окне характеристик выставляем сумму 300 руб. Опосля нажатия на клавишу «ОК» получаем перечень из 4 средств типов «Помада» и «Сияние для губ» и стоимостью наименее 300 рублей.

Фильтр по цене

В конце концов, добавляем очередное условие фильтрации данных – по цвету. Наш прайс-лист указывает примеры цветовой палитры декоративной косметики. Воспользуемся сиим и выберем средства для губ светло-розового колера. В меню столбца «Цветовая палитра» избираем пункт «Фильтр по цвету», жмем в нем клавишу «Остальные цвета ячеек», если предложенного выбора недостаточно, и избираем хотимый колер. По кнопочке «Ок» остаются лишь средства в подходящем ценовом и цветовом спектре.

Сортировка и поиск инфы

Даже опосля того, как излишние записи будут укрыты, их как и раньше может оказаться много для выбора либо анализа. В этом случае применяется еще одна комфортная возможность MS Excel – сортировка. В уже изученном нами меню есть пункты, которые посодействуют выстроить элементы таблицы в нужном порядке, облегчив, тем, поиск.

Упорядочивание частей в столбце может быть, в зависимости от типа инфы в нем. Для текстовых полей предлагается распределение от «А» до «Я» и в оборотном направлении. Ее комфортно использовать, например, для наиболее комфортного поиска по фамилии клиента, наименованию напарника и т.п.

Числовые поля сортируются по возрастанию и убыванию. Следует быть внимательными в случае, если числа внесены в столбец как текст. В этом случае они будут упорядочены как текст, другими словами, числа 10, 11, 100, 12, 110 будут идти в таком порядке в зависимости от формата полей:

Сортировка в числовом формате Сортировка в текстовом формате
10 10
11 100
12 11
100 110
110 12

Записи упорядочиваются по ряду характеристик. Для этого существует вариант настраиваемой сортировки в меню клавиша «Сортировка и фильтр». Вы выбираете, по каким полям сортировать, какого типа и в каком порядке использовать:

Окно сортировки

В настраиваемых перечнях содержатся деньки недельки и месяцы, и юзер может ввести свой со своими элементами.

Интересно почитать:  Как распечатать документ из экселя

БД Access

Не наименее полезна фильтрация в базах данных. В Access есть несколько вариантов получения нужной инфы: при помощи общих характеристик, по определенному значению, по форме и при помощи запросов.

На главной вкладке приложения вы отыщите панель инструментов «Сортировка и фильтр». Клавиши на ней употребляются для совершения обозначенных операций. В Access употребляется этот же механизм, что в Excel. Остановимся наиболее тщательно на тех методах, с которыми мы еще не знакомы.

Методы

Общая фильтрация данных в Access реализуется так же, как и в MS Excel, при помощи выпадающего меню в заголовке столбца. По аналогии, выбирается один либо несколько частей из перечня доступных либо применяется селекция по типу инфы в столбце.

Чтоб применять в качестве параметра конкретное значение в ячейке, выделяют эту ячейку и выбирают меню «Выделение» на панели «Сортировка и фильтр» или вызывают перечень доступных действий правым кликом. Способности отбора зависят от типа, к которому принадлежит содержимое ячейки.

Фильтр по выделению

Фильтр по форме – обычный метод нахождения записей с возможностью использования нескольких характеристик. Он вызывается операцией «Добавочно» — «Фильтр по форме». При всем этом создается пустая форма, на которой вы выставляете характеристики, опосля что нажимаете «Добавочно» — «Применить». Сейчас форма содержит лишь разыскиваемые записи.

Запросы для отбора данных

Доп комфортным средством фильтрации данных в БД являются запросы. Их создание просит времени и нужных способностей, но запросы владеют рядом преимуществ. До этого всего, в один прекрасный момент написав запрос на подборку и сохранив его, вы получаете механизм, который можно применять повсевременно для построения отчетов, вывода строк в формы, сотворения сложных перекрестных запросов и т.д.

В запросах можно применять поля нескольких таблиц, добавив условия для получения данных по любому из их. Эти объекты БД создаются при помощи Конструктора, мастера запросов либо редактора SQL.

Запросы SQL на подборку имеют структуру вида

Select [список полей]

Тут в блоке критерий задаются характеристики, по которым выбираются записи. Для примера составим запрос для выбора записей из таблицы “Продукты по складам”. Пусть нам нужно избрать строчки с вазами под наименованием «Экстаз» и поглядеть, сколько продукта с таковым заглавием есть на любом из складов.

SELECT [Товары по складам].[Тип товара], Вазы.Ваза, [Товары по складам].Склад, [Товары по складам].Количество

FROM Вазы INNER JOIN [Товары по складам] ON Вазы.Код = [Товары по складам].Наименование

WHERE (([Товары по складам].[Тип товара]=»Ваза») AND ([Вазы].[Ваза]=»Экстаз»));

Итог будет смотреться так:

Результат запроса

В режиме конструктора запрос имеет вид:

Конструктор запроса

Сохранение и следующее применение

Время от времени возникает необходимость неоднократного использования в один прекрасный момент установленного отбора либо его автоматического внедрения при запуске таблицы либо формы. Сохранение критерий происходит автоматом при закрытии объекта. При следующем его открытии показываются все записи, и для того, чтоб опять применить сохраненное ограничение, необходимо надавить клавишу «Фильтр» панели «Сортировка и фильтр».

Фильтр при загрузке

Для автоматического внедрения подходящего отбора воспользуйтесь свойством объекта «Фильтр при загрузке», установив его в значение «Да»

Очередной метод сохранения и следующего использования – в качестве запроса. Для этого задают расширенные характеристики. Настраивают нужные поля для поиска, сортировку и фильтрацию данных и сохраняют в контекстном меню. Потом его загружают из такого же меню командой «Загрузить из запроса»

Фильтр как запрос

Поиск и выстраивание перечня в Access

По аналогии с MS Excel, Access предоставляет юзеру возможность сортировки по столбцам, чтоб облегчить поиск подходящей инфы. Упорядочивание значений происходит по алфавиту для текста (в прямом и оборотном порядке), по возрастанию и убыванию для числовой инфы и дат. Можно использовать ее по нескольким полям сразу, что еще наиболее помогает в задачке поиска подходящих записей. Текстовые поля распределяются без учета регистра.

Для нахождения записи с вхождением подходящей строчки употребляется механизм поиска – клавиша «Отыскать» одноименной панели инструментов. В окне вносятся характеристики поиска – строчка, пространство, направление, часть поля, регистр.

Инструмент поиска

Механизмы сортировки, поиска и фильтрации данных в электрических таблицах и БД существенно упрощают работу с большенными массивами инфы. Если научиться воспользоваться ими просто, внедрение этих инструментов станет обычным, убыстрит и облегчит каждодневный труд.

Ссылка на основную публикацию
Adblock
detector