Схемы для обработки данных

В Webix существуют схемы для обработки данных при операциях загрузки, обновления, сериализации, группировки или сортировки элементов.

Объект схемы задаётся в свойстве scheme. Это свойство позволяет задавать исходные схемы для записей данных в DataStore. Например в случае, если вы добавите пустую запись в DataStore, она будет заполнена значением, установленным схемой.

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

var list1 = webix.ui({
    view:"list",
    scheme:{
        name:"Unknown",
        age:16
    }
});
 
list1.add({}); // добавляет запись { name:"Unknown", age:16 }

add() - метод компонента DataStore. Свойство data позволяет получить доступ к методу.

Кроме того, существуют специальные ключи, которые вы можете использовать внутри свойства:

• $init - выполняется в следующих случаях:
  • когда данные по умолчанию загружаются в компонент;
  • при перезагрузке данных для новых элементов DataStore;
  • при вызове метода add;
  • при обработке объекта $group;
• $update - выполняется для существующих элементов при перезагрузке данных (для новых выполняется $init); также при вызове метода update;
• $save - выполняется при сохранении данных на сервер;
• $change - выполняется каждый раз, когда данные в таблице изменяются (т.е. загружаются, добавляются, обновляются, удаляются). Обратите внимание, что эта функция выполняется, когда выполняется $init или $update;
• $serialize - выполняется при вызове метода serialize;
• $export - выполняется при экспорте данных (вне зависимости от метода экспорта)
• $group - объект с параметрами группировки. Передаётся в функцию group, которая автоматически выполняется при первоначальной загрузки данных в компонент;
• $sort - объект с параметрами сортировки. Передаётся в метод sort, который автоматически выполняется при первоначальной загрузки данных в компонент.

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

Ключ $init

Параметры ввода

Функция $init принимает 1 параметр - объект элемента данных.

Функция вызывается при:

• каждого элемента данных при первоначальной загрузке;
• добавленных элементов при перезагрузке;
• указанных элементов при вызове метода add;
• при обработке объекта $group.

Пример использования

Предположим, у вас есть список с элементами данных и вы хотите применить для них разные CSS стили в зависимости от значения поля "year". Логика следующая:

• для элементов, значение года которых раньше 1970 года, применяем CSS класс "oldtime";
• для элементов, значение года которых позже 2000 года, применяем CSS класс "newtime".

Ниже пример того, как может быть полезна функция $init внутри схемы данных:

webix.ui({
    view:"list", 
    layout:"x",
    scheme:{
        $init:function(obj){
            if (obj.year >= 2000) obj.$css = "newtime";
            if (obj.year <= 1970) obj.$css = "oldtime";
        }
    }
});

Related sample:  Horizontal List

Ключ $update

Параметры ввода

Функция $update принимает 1 параметр - объект элемента данных.

Функция вызывается:

• для обновлённых данных при перезагрузке;
• для указанного элемента при вызове метода update.

Пример использования

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

webix.ui({
    view:"list",
    scheme:{
        $update:function(obj){ 
            var today = new Date();
            // "update_date" - свойство данных
            obj.update_date = today.getDate();
        }
    }
});

Ключ $save

Параметры ввода

Функция $save принимает 1 параметр - объект элемента данных.

Функция вызывается каждый раз, когда новые или изменённые данные отправляются на сервер.

Пример использования

В комбинации с $init, $save даёт возможность указывать шаблон загрузки и сохранения серверных данных.

Например, вы можете работать с датами на клиенте как с DateTime объектами, а на сервере хранить их в строком формате. Чтобы избежать форматирования при каждой операции, можно делать это только при загрузке и сохранении данных.

webix.ui({
    view:"datatable",
    url:"data.php", // loading data
    save:"data.php", // saving data
    scheme:{
        // преобразование строк в объекты при загрузке
        $init:function(obj){
            if (obj.birthday)
                obj.birthday = webix.i18n.parseFormatDate(obj.birthday);
        },
        // преобразование объектов обратно в строки при сохранении
        $save:function(obj){
            if (obj.birthday)
                obj.birthday = webix.i18n.parseFormatStr(obj.birthday)
        }
    },
    columns:[...]
});

Ключ $change

Параметры ввода

Функция $change принимает 1 параметр - объект элемента данных.

Функция вызывается каждый раз, в таблице изменяются данные.

Пример использования

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

webix.ui({
    view:"datatable",
    scheme:{
        $change:function(item){
            if (item.year > 1980)
                item.$css = { "color":"red" };
        }
    }
});

Related sample:  Rows Styling

Ключ $serialize

Параметры ввода

Функция $serialize принимает 1 параметр - объект элемента данных.

Функция выполняется для каждого элемента при вызове метода serialize.

Ключ $serialize должен возвращать объект элемента данных, который отправится в готовый сериализованный JSON объект. Исходные данные должны оставаться неизменными.

Пример использования

Предположим, в базе данных вы храните значения дат в объектах Date(). Но на стороне клиента вы хотите работать с этими данными в строковом формате. В этом случае вам необходимо указать ключ $serialize и вызвать метод serialize дял получения данных в желаемом формате:

webix.ui({
    view:"list",
    id:"mylist",
    data:list_data,
    template:"#date#",
    scheme:{
        $init:function(obj){
            obj.date = new Date();
        },
        $serialize: function(obj){
            return { value:obj.value, date: webix.i18n.dateFormatStr(obj.date) };
        }
    }
});
 
var items = $$("mylist").serialize();

Related sample:  Getting Data in the Required Format

Ключ $export

Параметры ввода

Функция $export принимает 1 параметр - объект элемента данных.

Функция вызывается при экспорте в PDF, Excel, CSV форматы.

Ключ $export должен возвращать объект элемента данных, который отправится в экспоруемый набо данных. Исходные данные должны оставаться неизменными.

Пример использования

Предположим, вы хотите экспортировать даты в строковом формате. Укажите ключ $export, который трансформирует даты и вернёт их в метод экспорта:

webix.ui({
    view:"list",
    id:"mylist",
    data:list_data,
    template:"#date#",
    scheme:{
        $export:function(obj){
            return { value:obj.value, date:webix.i18n.parseFormatStr(obj.date) };
        }
    }
});
 
webix.toExcel($$("mylist"));

Related sample:  Changing Item Data in Export

Ключ $group

Параметры ввода

Функция $group принимает 1 параметр - так называемый, групповой объект с двумя свойствами:

• by – условие для объединения данных в группы;
• map – объект, который определяет свойства элементов группы.

Свойства помещаются в массив. Первый элемент массива, это темплейт со свойством из исходных данных, второй - функциональный элемент, который будет применён ко всем значениям свойства (установленным первым элементом массива) в группе. У группировки есть следующие функциональные элементы:

• sum – получает сумму значений;
• max – получает максимальное значение в группе;
• min - получает минимальное значение в группе.

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

Функция $group вызывается для каждого элемента при первоначальной загрузке данных.

Функция не выполнится, есть вы вызовите метод group программно.

Пример использования

Давайте рассмотрим следующий пример. У вас есть данные о продажах нескольких компаний за прошлый год. Вы хотите отобразить общие продажи компаний в чарте. Для этого вам необходимо получить объекты компаний и суммировать их продажи. Группировка поможет решить эту задачу.

webix.ui({
    view:"chart",
    scheme:{
        $group:{
            by:"#company#", // 'company' - свойство данных
            map:{
                sales:["#sales#","sum"]
            }   
        }
    }
});

Related sample:  Grouping

Ключ $sort

Параметры ввода

Функция $sort принимает 1 параметр - объект сортировки с 3 свойствами:

• by - свойство, по которому будут сортироваться элементы;
• dir - направление сортировки: "asc"(восходящая) или "desc"(нисходящая);
• as - режим сортировки. Доступны следующие режимы:
  • "int"
  • "date"
  • "string"
  • "string_strict" (чувствителен к регистру "string")
  • "text"
  • "server"
  • "raw"
  • или пользовательский.

Пользовательский метод сортировки задаётся функцией. Это функция вызывается для каждой пары соседних элементов и возвращает 1,-1 или 0:

• 1 - объект с первым значением в паре находится перед вторым
• -1 - второй объект находится перед первым
• 0 - объекты равны

Функция $sort вызывается для каждого элемента данных при первоначальной загрузке.

Функция не выполнится, есть вы вызовите метод sort программно.

Пример использования

Предположим, вам необходимо отсортировать данные по свойству "time", которое содержит минуты и секунды, разделённые ":". Следующий пример показывает использование ключа $sort, а также вариант указания пользовательского метода сортировки:

webix.ui({
    view:"chart",
    scheme:{
        $sort:{
            by:"time",
            dir:"asc",
            as:sortTime
        }
    }
});
 
function sortTime(a,b){
    a = a.split(":");
    b = b.split(":");
    if (a[0] > b[0]) return 1;
    else if (a[0] < b[0]) return -1;
    else{
        if (a[1] > b[1]) return 1;
        else if (a[1] < b[1]) return -1;
        return 0;
    }
}

Наверх