layuiExtend — Динамическое условие

Журнал обновлений и связанные документы

Если вам понравилось, пожалуйста, не забудьте нажать кнопки "Watch" и "Star". Это позволит получать уведомления о последующих обновлениях.

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

Примечание:

При обновлении до версий v3.0.0 и выше требуется замена только файлов dynamicCondition.js и dc.css.

Удаление файла dcConfig.js при использовании версии v3 позволяет полностью совместимым образом использовать более ранние версии.

Версия v3 включает новый файл конфигурации dcConfig.js для глобальной настройки значений по умолчанию. Этот файл можно не менять, а вместо этого настроить его в соответствии со своими потребностями.

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

Описание проекта

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

Так как система была написана на основе фреймворка layui, плагин также был создан на этом фреймворке. Я написал статью, чтобы подробно рассказать о нем.

Перейти к детальному описанию плагина

Поиск условий разделен на два типа: с модальным окном / без модального окна.

Сложность условий также делится на простые / сложные условия.

Каждый тип имеет свои преимущества:

1. Простые условия: традиционный поиск может быть легко заменен на простые условия без изменения кода серверной части.

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

3. Условия с модальным окном: когда одновременно требуется много условий поиска, использование модального окна помогает сделать интерфейс более приятным.

4. Условия без модального окна: если предоставляемых условий достаточно много, но каждый раз используется только одно-три условия, то лучше использовать режим без модального окна.

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

1. Простые условия без модального окна: этот режим близок к традиционному интерфейсу поиска. Его можно использовать без изменения кода серверной части.

2. Сложные условия без модального окна: рекомендовано использовать этот режим. Для него требуется реализация логики на стороне сервера.

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

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

Загрузить исходный код

Демонстрация 1: Демо динамического добавления условий поиска

Демонстрация 2: Демо с серверной частью

Документация по использованию:

UI-плагин для динамического добавления условий поиска на основе layui - API компонентов и справочник данных

Обновление компонента advanced search dynamicCondition до версии v2.0.0 - шаги установки

Обновление компонента advanced search dynamicCondition до версии v2.0.0 - расширенный редактор

Связь выпадающих списков в компоненте advanced search (часть 3)

Обновление компонента dynamicCondition до версии 2.0.2

Демонстрационный экран (без модального окна):

Демонстрационный экран (с модальным окном):