2.0.0 • Published 7 years ago

structured-filter-ru v2.0.0

Weekly downloads
2
License
MIT
Repository
github
Last release
7 years ago

structured-filter

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

screenshot 1

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

Содержание

  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 тем или вашу собственную тему, созданную с помощью 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 лицензией.

filterqueryeditorsearchformwidgetjqueryjquery-uijquery-plugin
jqueryjquery-ui
2.0.0

7 years ago