DataTable — самый популярный виджет библиотеки компонентов Webix. Он быстрый, гибкий и может использоваться в самых разных сценариях. По умолчанию, в ячейках этого компонента отображается только текстовый контент. Тем не менее, вы можете использовать темплейты, чтобы показать более сложный контент в ячейках DataTable. Иконки, кнопки и даже другие виджеты могут использоваться в качестве темплейтов ячеек.
Давайте посмотрим, как это можно сделать.
Чекбоксы и радиокнопки
Самый распространенный вариант использования — это добавление чекбокса в ячейку DataTable. Поскольку этот сценарий используется довольно часто, мы сделали для него готовое решение. Вам просто нужно задать его в качестве значения темплейта ячейки вот так:
и вы получите полноценный чекбокс.
Чтобы получить радиокнопку, можно использовать аналогичный синтаксис:
Иконки и кнопки
Еще один общий сценарий использования — это добавление кнопки в строку для вызова какого-либо действия. Эту задачу можно решить двумя способами: добавить кнопку или добавить иконку.
Иконки
В библиотеке Webix нет готового решения для добавления иконок, но вы можете написать простой HTML темплейт, чтобы отрисовать иконку в ячейке. Например, вот такой:
Просто и быстро. Теперь для иконки можно задать обработчик клика. Например:
"fa-trash-o" : function(ev, id){
//id - row id
this.remove(id);
}
}}
В коде выше мы назначили обработчик события onClick для элемента с CSS-классом “fa-trash-o”. Эту технику можно использовать для любых кастомных HTML элементов.
Кнопки
Кнопки в DataTable можно добавить таким же образом:
webix_button в коде выше — это предопределенный CSS класс, который в текущем скине придает инпуту вид кнопки. Задавать именно этот класс необязательно, вы можете использовать собственный стиль.
Чтобы назначить обработчик события, вы можете использовать то же решение, которое было использовано для иконок. Просто используйте другой CSS класс для добавления события.
Встраивание контролов
Есть два способа отобразить комплексный интерфейс внутри DataTable. Первый подразумевает использование subviews, а второй в качестве решения предлагает использовать active content.
Subviews
Subviews позволяют представить любой Webix интерфейс как содержимое строки. Они работают только для DataTable и TreeTable.
Все, что вам нужно сделать, это описать структуру встроенного интерфейса в свойстве subview. Вы можете узнать больше из документации или посмотреть демо.
Активный контент
Активный контент позволяет показывать контролы компонента Webix Form в ячейке DataTable. Это может быть полезно, если вы хотите показать что-то более сложное, чем кнопки или иконки (которые легко добавляются с помощью простых HTML темплейтов). Например, активный контент может использоваться, чтобы показать сегментированные кнопки или слайдер в качестве содержимого ячейки.
Для начала, нужно расширить datatable с помощью примеси ActiveContent:
name:"activeTable",
}, webix.ui.datatable, webix.ActiveContent);
Затем в свойстве activeContent необходимо описать контент, который мы хотим встроить:
status:{
view:"toggle",
type:"iconButton",
offIcon:"pause", onIcon:"play",
offLabel:"Disabled", onLabel:"Enabled",
width:110, height:30,
earlyInit:true
}
}
Наконец, элемент активного контента нужно задать в темплейте ячейки:
Добавление активного контента — это самый сложный способ встраивания новых элементов в datatable, поэтому использовать его лучше в крайнем случае.
ActiveContent или вложенные редакторы?
Может показаться, что ActiveContent отлично подходит для использования в качестве редакторов грида. Но это не самая лучшая идея. ActiveContent не может заменить вложенные редакторы. Если вы хотите, чтобы редактор всегда оставался видимым, вам просто нужно изменить стиль отрисовки, как это показано в примере ниже:
Как видите, темплейт содержит и кастомную иконку, которая создает вид select контрола, и содержимое ячейки.
Возможно, я что-то упустил?
Приведенные выше техники (кроме subviews) могут использоваться не только для DataTable, но и для других data компонент, таких как list, tree, treetable, dataview и др. Таким образом, вы можете встраивать контролы и комбинировать их, чтобы создать полноценный интерфейс своих приложений.
На мой взгляд, данные техники описывают большинство реальных сценариев использования. Если же я что-то упустил, смело задавайте вопросы или пишите свои идеи в комментариях.
