Работа со значением

Как задать значение

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

Исходное значение

view:"query",
value:{
  "glue": "or",
  "rules": [
    {
      "field": "first_name",
      "includes": [
        "Diana"
      ]
    },
    {
      "glue": "and",
      "rules": [
        {
          "field": "age",
          "condition": {
            "type": "less",
            "filter": 45
          }
        }
      ]
    }
  ]
}

Related sample: Query: Initialization

Объект value содержит следующие свойства:

glue (string) - логика комбинирования правил фильтрации:
"AND" (default) - отображать записи, которые соответствуют всем правилам одновременно;
"OR" - показывать записи, которые соответствуют хотя бы одному правилу.
rules (array) - набор правил фильтрации. Каждый элемент массива - это правило со следующими свойствами:
- field (string) - ID поля. Должен совпадать с идентификатором поля данных соответствующего компонента, который будет фильтроваться с помощью Query;
- condition (object) - объект со следующими свойствами:
  - filter - значение, переданное полю;
  - type - тип правила фильтрации.
- includes (array) - массив включённых значений.

Как получить значение

Свойство value у Query является реактивным. Это означает, что разработчики могут получать и устанавливать его значение, а также слушать его изменения через состояние компонента:

Чтобы получить свойство value, вызовите метод getState() и обратитесь к свойству "value" полученного объекта:

$$("query").getState().value; // объект с правилами фильтрации или null

Отслеживание изменений

Чтобы отслеживать изменения value, необходимо использовать обработчик $observe через объект состояния:

$$("query").getState().$observe("value", function(value){
    // ваш код
});

Дополнительно можно использовать $observe в тандеме с обработчиком onInit. Код внутри обработчика будет выполнен до инициализации виджета:

webix.ui({
 view: "query",
 fields: [ /*поля для фильтрации*/ ],
 value: { /**правила фильтрации и комбинирования полей*/ },
 
 on: {
  onInit: function() {
    // "this" указывает на компонент
   this.getState().$observe("value", function(value){ 
    // ваш код
   }); 
  }
 }
 
});

Это может пригодиться при использовании Query для фильтрации данных.

Как получить функцию фильтрации

Чтобы использовать Query для фильтрации данных, нужно получить его вспомогательную функцию, которая реализует логику фильтрации. Это можно сделать с помощью метода getFilterFunction():

$$("query").getFilterFunction();

Метод возвращает функцию, которая объединяет все заданные правила фильтрации.

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

webix.ui({
  view: "query",
  on: {
    onChange() {
      const filter = this.getFilterFunction();
      // data-widget to filter data in
      $$("data-widget").filter(filter);
    }
  }
});

Related sample: Query: Filtering Data

Наверх