Возможно, вы уже знаете, что внутри контрола DataTable могут быть не только текстовые данные, но и чекбоксы. Они используются как для отображения состояния данных, так и для редактирования.
Основные чекбоксы
Минимальный код для инициализации DataTable с чекбоксами выглядит следующим образом:
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()}” в темплейте преобразуется в чекбокс контрол.
Открыв демо, вы можете немного разочароваться в функциональности чекбоксов. Чтобы кликнуть по чекбоксу, нужно будет хорошенько “прицелиться”. Уж слишком они маленькие. Однако, мы можем решить данную проблему двумя различными способами. Можно либо увеличить размеры чекбоксов или же создать возможность клика в любом месте строки, для того чтобы отметить соответствующий чекбокс.
Упрощение клика по чекбоксу
Давайте сначала рассмотрим возможность увеличения размеров чекбоксов. Это совсем несложно сделать, если вы примените следующее простое css правило:
width:22px;
height:22px;
margin-top:5px;
}
Возможно, получившиеся чекбоксы не столь привлекательны, однако, они намного удобнее для клика.
Второй подход тоже совсем не сложен в реализации. Согласно этому методу, клик в любом месте строки отметит соответствующий чекбокс. Мы можем использовать событие onitemClick компонента DataTable для того, чтобы отметить строку.
onItemClick:function(id){
this.getItem(id.row).status = !this.getItem(id).status;
this.refresh(id.row);
}
},
Данный код добавляет обработчик клика, который будет изменять состояние чекбокса, в то время как пользователь будет кликать в любом месте соответствующей строки.
Использование кастомных иконок
Если чекбокс несет какой-то особый смысл, его можно заменить парой иконок для активного/неактивного состояний, соответственно. Например, мы можем использовать общую иконку “eye” для столбца “Is Visible”.
Для того, чтобы заменить чекбокс иконкой, нам нужно задать наш собственный темплейт, вместо используемого стандартного:
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.
Важно: Для корректной работы кода вам необходимо задать свойству checkboxRefresh компонента DataTable значение true. Это необходимо сделать для всех кастомных чекбоксов, поскольку данный флаг вызывает повторную отрисовку строки после клика по кастомному чекбоксу.
Одновременное переключение всех чекбоксов
Когда ваш JavaScript грид содержит множество строк, кликать по каждой из них — весьма утомительная работа. Чтобы облегчить данный процесс, можно добавить еще один чекбокс в шапку грида. Клик по этому чекбоксу выделит все строки одновременно или снимет выделение со всех строк.
width:80, css:"center",
template:"{common.checkbox()}"},
В коде, приведенном выше, вместо хедера используется инструкция content:”masterCheckbox”. Она будет отрисована как чекбокс в хедере DataTable. Клик по такому чекбоксу отметит все остальные чекбоксы в DataTable.
Выделение строк с помощью чекбоксов
Вы можете выделить цветом строки, в которых чекбоксы находятся в активном состоянии, чтобы сделать их более заметными. Это легко осуществить, применив темплейт cssFormat в конфигурации столбцов.
function status(value, obj){
if (obj.status) return "row-marked";
return "";
}
//добавляем ее в конфигурацию столбцов с помощью темплейта
{ id:"value", header:"Records", fillspace:1 , cssFormat:status },
Обратите внимание, что для правильной работы описанной функциональности вам необходимо активировать флаг checkboxRefresh, как мы уже это делали в сценарии с использованием иконок.
Как видите, для того чтобы расширить возможности DataTable, вы можете просто улучшить функциональность чекбоксов виджета.
Надеюсь, техники, описанные в данной статье, будут для вас полезными. Вы можете комбинировать их для достижения большего эффекта, или же изобрести новые интересные техники самостоятельно.
