Форматирование дат и чисел

Формат чисел

Чтобы задать нужный формат для числового поля, используйте атрибут format.

Использование числовых темплейтов

webix.ui({
    view:"datatable",
    columns:[
        {
            id:"votes", format:webix.Number.numToStr({
                groupDelimiter:",",
                groupSize:3,
                decimalDelimiter:".",
                decimalSize:2
            })
        },
        // ...
    ]
});

Related sample:  Using Number Templates

Метод numToStr позволяет устанавливать следующие свойства для дробных чисел:

• groupDelimiter - символ, который разделяет группы цифр. "," по умолчанию;
• groupSize - количество цифр в группе. 3 по умолчанию;
• decimalDelimiter - символ, который отделяет целую часть от дробной. "." по умолчанию;
• decimalSize - количество десятичных цифр в числе с плавающей запятой. 2 по умолчанию.

Есть два готовых набора: numberFormat и priceFormat. Они предоставляют форматирование числе и денежных единиц в соответствии с установленной локалью.

webix.ui({
    view:"datatable",
    columns:[
        { id:"votes", format:webix.i18n.numberFormat },
        { id:"price", format:webix.i18n.priceFormat }
    ]
});

Подробнее о методах форматирования.

Установка числового формата для редакторов

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

webix.ui({
    view:"datatable",
    columns:[
        { id:"votes", editor:"text", numberFormat:"1'111.00", header:"Votes"},
        { id:"rating", editor:"text", numberFormat:"1.111,00", header:"Rating"}
    ]
});

Строка формата должна следовать тем же правилам что и свойство format контрола Text.

Подробнее о редакторах данных.

Пользовательский числовой формат для редакторов

Вы также можете указать пользовательский формат для редакторов таблицы с помощью функций, заданных в атрибутах format, editParse и editFormat столбца:

webix.ui({
    view:"datatable",
    columns:[
        {
            id:"phone", editor:"text", header:"Votes",
            format:function(value){
                return webix.i18n.numberFormat(value)
            },
            editParse: function(value){
                return webix.Number.parse(value, {
                    groupSize:webix.i18n.groupSize,
                    groupDelimiter:webix.i18n.groupDelimiter,
                    decimalSize : webix.i18n.decimalSize,
                    decimalDelimiter : webix.i18n.decimalDelimiter
                });
            },
            editFormat:function(value){
                return webix.i18n.numberFormat(value)
            }
        }
    ]
});

Подробнее о редакторах данных.

Форматирование дат

Даты в DataTable могут быть объектом DateTime или строками, но форматирование может быть применено только к DateTime. Т.о. чтобы отформатировать строковые значения, вам нужно сперва конвертировать их в DateTime.

Общее форматирование дат

Чтобы установить нужный формат для даты и времени, установите атрибут format как:

• Часть объекта i18n;
• Метод объекта Date - dateToStr.

Установка формата дат

webix.ui({
    view:"datatable",
    columns:[
        { template:"#start#", header:"Date",  format:webix.i18n.dateFormatStr},
        {
            template:"#start#",
            header:"Y-m-d",
            format:webix.Date.dateToStr("%Y-%m-%d")
        }
    ],
    data:[
        { text:"Finish", start:new Date(2012,11,12) },
        { text:"Start",  start:new Date(1988,1,29) }
    ]
});

Related sample:  Using Date Templates

Подробнее о методах форматирования дат.

Конвертирование строковых значений в формат DateTime

Для корректной работы с датами, в данных должны быть объекты Date, но во всех общих форматах данные представлены строками. DataTable предоставляет возможность автоматического преобразования дат из строк в объекты Date:

webix.ui({
    view:"datatable",
    columns:[
        { map:"(date)#start#", header:"Date",  format:webix.i18n.dateFormatStr}
    ]
});

Related sample:  Converting Strings to Dates

Маркер (date) в начале объявления map преобразует данные из строки в объект. По умолчанию таблица будет ожидать данные в формате "%Y-%m-%d" (формат данных mysql), но вы можете изменить его следующим образом:

    webix.i18n.parseFormat = "%m.%d.%Y";
    webix.i18n.setLocale();

Пользовательское форматирование

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

webix.ui({
    view:"datatable",
    columns:[
        { id:"title", header:"Film title" },
        {
            id:"votes", header:"Votes",
            format:function(value){
                value = some_custom_logic(value);
                return value;
            }
        }
    ],
    // ...
});

Наверх