Блог

Чекбоксы в DataTable. Малоизвестные техники

Возможно, вы уже знаете, что внутри контрола DataTable могут быть не только текстовые данные, но и чекбоксы. Они используются как для отображения состояния данных, так и для редактирования.

Основные чекбоксы

Минимальный код для инициализации DataTable с чекбоксами выглядит следующим образом:

webix.ui({
  view:"datatable",
  columns:[
    { id:"status", header:"Is Active", width:80, css:"center",
        template:"{common.checkbox()}"},
    { id:"value", header:"Records", fillspace:1 },
  ],
  data: [
    { status:0, value:"Record A"},
    { status:1, value:"Record B"},
    { status:0, value:"Record C"}
  ]
});

Результатом работы данного кода является симпатичный JavaScript grid, представленный на картинке ниже. Строка “{common.checkbox()}” в темплейте преобразуется в чекбокс контрол.

Basic Webix Checkboxes

 

онлайн-демо: http://webix.com/snippet/f84d411f

Открыв демо, вы можете немного разочароваться в функциональности чекбоксов. Чтобы кликнуть по чекбоксу, нужно будет хорошенько “прицелиться”. Уж слишком они маленькие. Однако, мы можем решить данную проблему двумя различными способами. Можно либо увеличить размеры чекбоксов или же создать возможность клика в любом месте строки, для того чтобы отметить соответствующий чекбокс.

Упрощение клика по чекбоксу

Давайте сначала рассмотрим возможность увеличения размеров чекбоксов. Это совсем несложно сделать, если вы примените следующее простое css правило:

   .webix_table_checkbox{
    width:22px;
    height:22px;
    margin-top:5px;
  }

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

Simplified clicking in DatasTable Checkboxes

 

онлайн-демо: http://webix.com/snippet/d783b7db

Второй подход тоже совсем не сложен в реализации. Согласно этому методу, клик в любом месте строки отметит соответствующий чекбокс. Мы можем использовать событие onitemClick компонента DataTable для того, чтобы отметить строку.

  on:{
    onItemClick:function(id){
      this.getItem(id.row).status = !this.getItem(id).status;
      this.refresh(id.row);
    }
  },

Данный код добавляет обработчик клика, который будет изменять состояние чекбокса, в то время как пользователь будет кликать в любом месте соответствующей строки.

онлайн-демо: http://webix.com/snippet/f668b598

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

Если чекбокс несет какой-то особый смысл, его можно заменить парой иконок для активного/неактивного состояний, соответственно. Например, мы можем использовать общую иконку “eye” для столбца “Is Visible”.

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

 { id:"status", width:60, template:function(obj, type, value){
      if (value)
        return "<span class='webix_table_checkbox webix_icon fa-eye'></span>";
      else
        return "<span class='webix_table_checkbox webix_icon fa-eye-slash'></span>";
    }},

Как видите, мы использовали теги вместо настоящих инпутов. У каждого из них есть 3 css класса:

  • webix_table_checkbox — задает обработчик onclick события для тега. Клик по тегу с таким классом переведет чекбокс из неактивного состояние в активное;
  • webix_icon— заменяет тег иконкой, см. ниже;
  • fa-yey and fa-eye-slash — названия иконок из Font Awesome.
Replace custom Webix checkbox

 

онлайн-демо: http://webix.com/snippet/c9bc8edb

Важно: Для корректной работы кода вам необходимо задать свойству checkboxRefresh компонента DataTable значение true. Это необходимо сделать для всех кастомных чекбоксов, поскольку данный флаг вызывает повторную отрисовку строки после клика по кастомному чекбоксу.

Одновременное переключение всех чекбоксов

Когда ваш JavaScript грид содержит множество строк, кликать по каждой из них — весьма утомительная работа. Чтобы облегчить данный процесс, можно добавить еще один чекбокс в шапку грида. Клик по этому чекбоксу выделит все строки одновременно или снимет выделение со всех строк.

 { id:"status", header:{ content:"masterCheckbox", css:"center" },
        width:80, css:"center",
        template:"{common.checkbox()}"},

В коде, приведенном выше, вместо хедера используется инструкция content:”masterCheckbox”. Она будет отрисована как чекбокс в хедере DataTable. Клик по такому чекбоксу отметит все остальные чекбоксы в DataTable.

Webix allows you to check/uncheck all rows at once

 

онлайн-демо: http://webix.com/snippet/e1da0ccd

Выделение строк с помощью чекбоксов

Вы можете выделить цветом строки, в которых чекбоксы находятся в активном состоянии, чтобы сделать их более заметными. Это легко осуществить, применив темплейт cssFormat в конфигурации столбцов.

//задаем функцию выделения цветом
function status(value, obj){
  if (obj.status) return "row-marked";
  return "";
}
//добавляем ее в конфигурацию столбцов с помощью темплейта
{ id:"value", header:"Records", fillspace:1 , cssFormat:status },
More distinct marking

 

онлайн-демо: http://webix.com/snippet/a47b75aa

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

Как видите, для того чтобы расширить возможности DataTable, вы можете просто улучшить функциональность чекбоксов виджета.

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

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

Veronika Lindorenko

Менеджер продукта Webix с 2012. Интересуется SMM и юзабилити. Создавая качественный и привлекательный контент, она стремится делать мир онлайна лучше.
Veronika Lindorenko

Latest posts by Veronika Lindorenko (see all)

Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn VK Vote on Reddit
  • andreyshedko

    Вероника, подскажите пожалуйста, как получить значение ячейки в строке, выбранной чекбоксом?