structured-filter-ru

structured-filter

Structured-Filter (текущая версия v2.0) - это веб интерфейс для построения структурированных поисковых запросов. С его помощью вы можете создавать структурированные условия поиска, такие как: Имя начинается на 'А' и День рождения после 01.01.1990 и т.д.

Посмотреть демо.

Содержание

1. Установка
2. Использование
3. Модель
4. Опции
5. Методы
6. События
7. Темы
8. Лицензия

Установка

Вы можете загрузить или сделать форк structured-filter на GitHub.

# Для получения текущий версии из git.
git clone https://github.com/LightAir/structured-filter-ru

Или npm пакет:

# Для получения текущей версии из npm.
npm install structured-filter

Или через Bower:

# Для получения текущей версии из Bower.
bower install structured-filter-ru

# Для получения самой последней версии из Bower:
bower install structured-filter#master

Примечание: Версия jQuery-UI должна быть выше 1.12.1

Использование

Сначала загрузите jQuery, jQuery UI, и плагины:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/structured-filter.js" type="text/javascript" charset="utf-8"></script>

Виджет требует наличия темы пользовательского интерфейса jQuery, а также собственного встроенного базового файла CSS (structured-filter.css). Здесь мы используем тему «ui-lightness» в качестве примера:

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css">
<link href="css/structured-filter.css" rel="stylesheet" type="text/css">

Теперь давайте прикрепим фильтр к существующему тегу <div>:

<script type="text/javascript">
    $(document).ready(function() {
        $("#myFilter").structFilter({
            fields: [
                {id:"lastname", type:"text", label:"Lastname"},
                {id:"firstname", type:"text", label:"Firstname"},
                {id:"active", type:"boolean", label:"Is active"},
                {id:"age", type:"number", label:"Age"},
                {id:"bday", type:"date", label:"Birthday"},
                {id:"category", type:"list", label:"Category",
                    list:[
                        {id:"1", label:"Family"},
                        {id:"2", label:"Friends"},
                        {id:"3", label:"Business"},
                        {id:"4", label:"Acquaintances"},
                        {id:"5", label:"Other"}
                    ]
                }
            ]
        });
    });
</script>

<div id="myFilter"></div>

Это заменит тег на виджет.

Модель

Виджет настроен со списком полей для использования в условиях поиска.

Поля

Каждое поле должно иметь идентификатор, тип и метку.

• id - уникальный идентификатор поля.
• label - имя отображаемого поля.
• type - тип данных. Возможные типы полей: text, number, boolean, date, time, list.

Поля типа «list» также должны иметь свойство «list» для значений (массив объектов с идентификатором и меткой).

Пример:

fields = [
    {id:"lastname", type:"text", label:"Lastname"},
    {id:"firstname", type:"text", label:"Firstname"},
    {id:"active", type:"boolean", label:"Is active"},
    {id:"age", type:"number", label:"Age"},
    {id:"bday", type:"date", label:"Birthday"},
    {id:"category", type:"list", label:"Category",
        list:[
            {id:"1", label:"Family"},
            {id:"2", label:"Friends"},
            ...
        ]
    }
];

Примечание. Чтобы изменить поведение поля «список», используйте вместо него «list-options» и «list-dropdown» вместо «list».

Условия

Запросы выражаются как набор условий.

Каждое условие определяется:

• поле
• оператор
• одно или несколько значений

Для каждого поля возможные операторы определяются его типом.

boolean:

• Да (1)
• нет (0)

date:

• равно (eq)
• не равно (ne)
• после (gt)
• до (lt)
• между (bw)
• не между (nbw)
• пусто (null)
• не пусто (nn)

list:

• любой из (in)
• соответствует (eq)

number:

• = (eq)
• != (ne)
• > (gt)
• < (lt)
• пусто (null)
• не пусто (nn)

text:

• соответствует (eq)
• не соответствует (ne)
• начинается (sw)
• содержит (ct)
• не содержит (nct)
• заканчивается (fw)
• пусто (null)
• не пусто (nn)

time:

• в (eq)
• не в (ne)
• после (gt)
• до (lt)
• между (bw)
• не между (nbw)
• пусто (null)
• не пусто (nn)

Опции

structured-filter предоставляет несколько параметров для настройки его поведения::

buttonLabels (Boolean)

Метки кнопок, используемые для управления фильтрами. Эти параметры применяются к кнопкам 3, «Новый фильтр», «Добавить фильтр» / «Фильтр обновления» и «Отмена», которые используют значки, если для параметра установлено значение «ложь».

$("#myFilter").structFilter({
    buttonLabels: true
});

По умолчанию false.

dateFormat (String)

Формат даты

$("#myFilter").structFilter({
    dateFormat: "d M, y"
});

По умолчанию "dd.mm.yyyy".

fields (array)

Список полей (как массив объектов с идентификатором, меткой и типом) для участия в определении запроса. Возможные типы: text, boolean, number, date, time и list.

$("#myFilter").structFilter({
    fields: [
        {id:"lastname", type:"text", label:"Lastname"},
        {id:"firstname", type:"text", label:"Firstname"},
        {id:"active", type:"boolean", label:"Is active"},
        {id:"age", type:"number", label:"Age"},
        {id:"bday", type:"date", label:"Birthday"},
        {id:"category", type:"list", label:"Category",
            list:[
                {id:"1", label:"Family"},
                {id:"2", label:"Friends"},
                {id:"3", label:"Business"},
                {id:"4", label:"Acquaintances"},
                {id:"5", label:"Other"}
            ]
        }
    ]
});

По умолчанию [ ].

highlight (Boolean)

A highlight animation performed on the last added or modified filter.

$("#myFilter").structFilter({
    highlight: false
});

По умолчанию true.

submitButton (Boolean)

Показывает или скрывает кнопку «Отправить».

$("#myFilter").structFilter({
    submitButton: true
});

По умолчанию false.

submitReady (Boolean)

Предоставляет скрытые поля значениям условий, которые должны быть отправлены с формой (в качестве альтернативы вызову AJAX).

$("#myFilter").structFilter({
    submitReady: true
});

По умолчанию false.

Методы

addCondition(data)

Добавляет новое условие фильтра.

$("#myFilter").structFilter("addCondition", {
    field:{
        label: "Lastname",
        value: "lastname"
    },
    operator:{
        label: "starts with",
        value: "sw"
    },
    value:{
        label: "\"a\"",
        value: "a"
    }
});

clear()

Удаляет все фильтры поиска.

$("#myFilter").structFilter("clear");

length()

Возвращает количество фильтров.

$("#myFilter").structFilter("length");

removeCondition(index)

Удаляет условие указанного индекса.

$("#myFilter").structFilter("removeCondition", 0);

val([data])

Получает или задает определение фильтра (в виде массива фильтров).

$("#myFilter").structFilter("val");

$("#myFilter").structFilter("val", data);

Результат:

[
    {
        field:{
            label: "Lastname",
            value: "Lastname"
        },
        operator:{
            label: "starts with",
            value: "sw"
        },
        value:{
            label: "\"jo\"",
            value: "jo"
        }
    }
]

valText()

Получает определение фильтра (в виде читаемой текстовой строки)..

$("#myFilter").structFilter("valText");

Результат:

Фамилия начинается "jo"

valUrl()

Получает определение фильтра (в виде строки URL).

$("#myFilter").structFilter("valUrl");

Результат:

filters=1&field-0=Lastname&operator-0=sw&value-0=jo&label=Lastname%20starts%20with%20%22jo%22%0A

События

change.search

Это событие запускается, когда изменяется список условий поиска.

$("#myFilter").on("change.search", function(event){
    // do something
});

submit.search

Это событие срабатывает при нажатии кнопки отправки.

$("#myFilter").on("submit.search", function(event){
    // do something
});

Темы

Фильтр так же легко настраивается, как любой виджет jQuery UI, используя одну из [jQuery UI тем] (http://jqueryui.com/themeroller/#themeGallery) или вашу собственную тему, созданную с помощью [Themeroller] (http: / /jqueryui.com/themeroller/). Версия structured-filter для Bootstrap и Backbone.js доступен как часть Evolutility-UI-jQuery set of generic views дляr CRUD (Create, Read, Update, Delete) and more.

Лицензия

Copyright (c) 2017 Olivier Giulieri.

structured-filter выпущен под MIT лицензией.