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

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

Подробнее о том, как можно задавать темплейты, читайте в 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), например: изображения, ссылки, числа, строки, даты.

template:"<strong>#title#</strong>"

template:"<img src='.imgs/#id#.jpg'/>"

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-функции

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

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

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

Using custom templates

webix.ui({
  rows:[
    { 
      view:"datatable", 
      data:grid_data,
      columns: [
        {
          id: "title",
          template: function(obj, common, value, column, index) {
            return obj.title
          }
        }
      ]
    }
  ]
});

Подробнее о стилизации читайте здесь.

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

Если вы хотите использовать 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

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

• чекбоксы;
• радиокнопки;
• иконка "редактировать";
• иконка "удалить";
• спраклайны.

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 - объект конфигурации столбца.