Блог

Комплексный контент в DataTable

DataTable — самый популярный виджет библиотеки компонентов Webix. Он быстрый, гибкий и может использоваться в самых разных сценариях. По умолчанию, в ячейках этого компонента отображается только текстовый контент. Тем не менее, вы можете использовать темплейты, чтобы показать более сложный контент в ячейках DataTable. Иконки, кнопки и даже другие виджеты могут использоваться в качестве темплейтов ячеек.

Давайте посмотрим, как это можно сделать.

Чекбоксы и радиокнопки

Самый распространенный вариант использования — это добавление чекбокса в ячейку DataTable. Поскольку этот сценарий используется довольно часто, мы сделали для него готовое решение. Вам просто нужно задать его в качестве значения темплейта ячейки вот так:

template:"{common.checkbox()}"

и вы получите полноценный чекбокс.

Data table

Демо

Чтобы получить радиокнопку, можно использовать аналогичный синтаксис:

template:"{common.radio()}"
Data table

 

Демо

Иконки и кнопки

Еще один общий сценарий использования — это добавление кнопки в строку для вызова какого-либо действия. Эту задачу можно решить двумя способами: добавить кнопку или добавить иконку.

Иконки

В библиотеке Webix нет готового решения для добавления иконок, но вы можете написать простой HTML темплейт, чтобы отрисовать иконку в ячейке. Например, вот такой:

template:"<span class='webix_icon fa-trash-o'></span>"
DataTable

 

Демо

Просто и быстро. Теперь для иконки можно задать обработчик клика. Например:

{ view:"datatable", onClick:{
"fa-trash-o" : function(ev, id){
//id - row id
this.remove(id);
}
}}

В коде выше мы назначили обработчик события onClick для элемента с CSS-классом “fa-trash-o”. Эту технику можно использовать для любых кастомных HTML элементов.

Демо

Кнопки

Кнопки в DataTable можно добавить таким же образом:

template:"<input type='button' class='webix_button' value='Remove'></span>"
DataTable

 

Демо

webix_button в коде выше — это предопределенный CSS класс, который в текущем скине придает инпуту вид кнопки. Задавать именно этот класс необязательно, вы можете использовать собственный стиль.

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

Встраивание контролов

Есть два способа отобразить комплексный интерфейс внутри  DataTable. Первый подразумевает использование subviews, а второй в качестве решения предлагает использовать active content.

Subviews

Subviews позволяют представить любой Webix интерфейс как содержимое строки. Они работают только для DataTable и TreeTable.

SubView

 

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

Активный контент

Активный контент позволяет показывать контролы компонента Webix Form в ячейке DataTable. Это может быть полезно, если вы хотите показать что-то более сложное, чем кнопки или иконки (которые легко добавляются с помощью простых HTML темплейтов). Например, активный контент может использоваться, чтобы показать сегментированные кнопки или слайдер в качестве содержимого ячейки.

Active-content

 

Демо

Для начала, нужно расширить datatable с помощью примеси ActiveContent:

webix.protoUI({
name:"activeTable",
}, webix.ui.datatable, webix.ActiveContent);

Затем в свойстве activeContent необходимо описать контент, который мы хотим встроить:

activeContent:{
status:{
view:"toggle",
type:"iconButton",
offIcon:"pause", onIcon:"play",
offLabel:"Disabled", onLabel:"Enabled",
width:110, height:30,
earlyInit:true
}
}

Наконец, элемент активного контента нужно задать в темплейте ячейки:

template:"{common.status()}"

Добавление активного контента — это самый сложный способ встраивания новых элементов в datatable, поэтому использовать его лучше в крайнем случае.

Вы можете узнать больше из документации.

ActiveContent или вложенные редакторы?

Может показаться, что ActiveContent отлично подходит для использования в качестве редакторов грида. Но это не самая лучшая идея. ActiveContent не может заменить вложенные редакторы. Если вы хотите, чтобы редактор всегда оставался видимым, вам просто нужно изменить стиль отрисовки, как это показано в примере ниже:

ActiveContent-vs-Inline-Editors

 

Демо

template: "<span class='webix_icon fa-angle-down arrow'></span>#status# "},

Как видите, темплейт содержит и кастомную иконку, которая создает вид select контрола, и содержимое ячейки.

Возможно, я что-то упустил?

Приведенные выше техники (кроме subviews) могут использоваться не только для DataTable, но и для других data компонент, таких как list, tree, treetable, dataview и др. Таким образом, вы можете встраивать контролы и комбинировать их, чтобы создать полноценный интерфейс своих приложений.

На мой взгляд, данные техники описывают большинство реальных сценариев использования. Если же я что-то упустил, смело задавайте вопросы или пишите свои идеи в комментариях.

Автор
The following two tabs change content below.

Maksim Kozhukh

Основные инструменты – Javascript, HTML и CSS. В детстве был благовоспитанным мальчиком, но начал программировать калькуляторы, контроллеры, компьютеры, связался с программистами и покатился…
Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn VK Vote on Reddit