Темплейты для ячеек

Строковые темплейты

Чтобы изменять содержимое данных и определять данные, которые будут отображены в DataTable, используйте темплейты. Темплейты данных устанавливаются для нужного столбца с помощью атрибута template.

Значения между # (например "#title#") должны совпадать с именами полей данных.

Подробнее о том, как можно задавать темплейты, читайте в Templates. Syntax.

Задание темплейта для столбца

webix.ui({
    view:"datatable",
    ...
    columns:[
        { id:"title", header:"Film title",    template:"<strong>#title#</strong>",
        { id:"year",  header:"Release year" , template:"at #year#",}
    ]
});

Related sample:  Using String Templates

Темплейты могут использоваться для представления практически любого содержимого в DataTable (все, что можно реализовать с помощью HTML, можно поместить в ячейку DataTable), например: изображения, ссылки, числа, строки, даты.

Таблица 1 Темплейты для разных типов содержимого
Содержимое Пример темплейта
strings
template:"<strong>#title#</strong>"
images
template:"<img src='.imgs/#id#.jpg'/>"
links
template:"<a href='http://google.com?q=#title#'>#title#</a>"

Сложные темплейты

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

webix.ui({
    view:"datatable",
    columns:[
        {id:"title", header:"Film title"},
        {id:"votes", header:"Votes", template:function(obj){
            return obj.votes / 1.2547;
        }};
    ],
    ...
})

Related sample:  Converting Strings to Dates

Подробнее.

Сочетание темплейтов и форматов

Если вы хотите использовать template и format для одного столбца, вам необходимо включить метода форматирования в template-функцию:

webix.ui({
    view:"datatable",
    columns:[
        {id:"votes", header:"Votes", template:function(obj, common){
            return "no more than "+ webix.i18n.numberFormat(obj.votes);
        }}
    ],
    ...
});

Добавить кнопки в темплейты

Вы можете добавить любой html в строку, чтобы добавить кнопки или другие контролы в DataTable:

webix.ui({
    view:"datatable",
    columns:[
        {id:"votes", header:"Votes",
        template:"#votes#<input type='button' value='Details' class='details_button'>"}
    ],
    onClick:{
        details_button:function(id, ev){
            // будет вызываться по клику на кнопку
            some_custom_method(id.row, id.column);
        }
    }
    ...
});

Related sample:  Datatable: Custom Handler

Параметры template-функции

Ниже представлен полный список template-функций для Datatable и TreeTable:

  • obj - каждый элемент данных
  • common - общие элементы, объявленные в type
  • value - значение текущей ячейки
  • col - конфигурация столбца
  • ind - индекс текущего элемента данных

Обратите внимание на то, что эта функция по-прежнему должна возвращать строку с текстом или HTML.

Встроенные темплейты

С помощью темплейта вы можете переопределить элементы для ячеек в столбце, а именно:

Вы можете определить дополнительные элементы внутри type.common.

webix.ui({
    view:"datatable",
    ...
    columns:[
        { id:"ch1", header:"", template:"{common.checkbox()}"},
        { id:"ra1", header:"", template:"{common.radio()}"}
    ]
});

Related sample:  Checkbox and Radio in DataTable

Подробнее о чекбоксах и радиокнопках в отдельной статье.

webix.ui({
    view:"datatable",
    ...
    columns:[
        { id:"edit", header:"", template:"{common.editIcon()}"},
        { id:"trash", header:"", template:"{common.trashIcon()}"}
    ]
});

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

webix.ui({
    view:"datatable",
    ...
    columns:[
        // для радио и чекбокса
        { id:"ra1", template:function(obj, common, value, config){
            return common.radio(obj, common, value, config);
        }},
        // для editIcon и trashIcon
        { id:"edit", header:"", template:function(obj, common){
            return common.editIcon(obj, common);
        }}
    ]
});

Функции common.checkbox() и common.radio() получают 4 параметра:

  • объект элемента с его свойствами из набора данных;
  • объект common с 4 методами:
    • common.checkbox(obj, common, value, config);
    • common.radio(obj, common, value, config);
    • common.editIcon(obj, common);
    • common.trashIcon(obj, common);
  • value - текущее состояние чекбокса/радиокнопки;
  • config - объект конфигурации столбца.
Наверх
If you have not checked yet, be sure to visit site of our main product Webix best ui framework and page of datatable product.