Фон для этого вопроса сосредоточен на сетке, демонстрирующей прогресс в задачах рабочих элементов. Каждая строка представляет собой рабочий элемент, который следует за набором шаблонов шагов, некоторые из которых выполняются для каждого рабочего элемента или выполняются одновременно во всех рабочих элементах.Kendo Grid и флажки - выберите все для данного столбца, «выберите все предыдущие»/«отменить выбор всех после» для ячейки данной строки
Брокер состоит в том, что флажок установлен в заголовке для каждого шага, который выполняется для всех рабочих элементов одновременно, и когда этот флажок установлен, все флажки в этом столбце проверяются.
Кроме того (и я понимаю, что это может быть отдельный вопрос, но я включаю это, поскольку он является частью той же самой проблемы, с которой я столкнулся), всякий раз, когда отмечен флажок в строке, все предыдущие флажки в этой строке также проверяются. Также считается, что любые флажки после определенного флажка не отмечены, если они непреднамеренно проверены, но я предполагаю, что это будет незначительным дополнением к коду «select» для ячейки ячейки строки.
Мое понимание заключается в том, чтобы в поле заголовка столбца было событие «on click», запускающее функцию, которая выполняет итерацию по строкам и устанавливает/отменяет выбор флажков в этом столбце. Эти флажки, в свою очередь, будут иметь onclick и «onchange» (поскольку флажок фактически не «щелкнут»?) Событиями, которые устанавливают все флажки перед этим флажком и снижают эти флажки далее вдоль строки.
См. Ниже, например, код, отображающий таблицу и некоторый псевдокод; пример использует статические данные как доказательство концепции для клиента, но в конечном итоге будет взаимодействовать с SQL DB. Я рад, что мне поставили вопрос, который отвечает на любой аспект этого вопроса, но, чтобы быть откровенным, вопросы, которые может ответить на эти вопросы, не очень ясны для меня или лучше обслуживают разные пользовательские интерфейсы/языки.
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource:
{
transport:
{
read: {
url: "<?= $site_url ?>asset/data/production_progress.json",
type: "GET",
dataType: "json"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
else
{
return "";
}
}
},
schema:
{
model:
{
id:"Item",
fields:
{
Item: { editable: false },
Step1: { type:"boolean", editable: true },
Step2: { type:"boolean", editable: true },
Step3: { type:"boolean", editable: true },
Step4: { type:"boolean", editable: true },
Step5: { type:"boolean", editable: true }
}
}
}
},
scrollable: false,
pageable: false,
columns: [
{ field: "Item" },
{ field: "Step1", title: "Step 1", attributes: {style: "text-align: center"}, template: '<input type="checkbox" #= Step1 ? "checked=checked" : "" # ></input>' },
{ field: "Step2", title: "Step 2", attributes: {style: "text-align: center"}, template: '<input type="checkbox" #= Step2 ? "checked=checked" : "" # ></input>' },
{ field: "Step3", attributes: {style: "text-align: center"}, template: '<input class="Step3" name="Step 3" type="checkbox" #= Step3 ? "checked=checked" : "" # ></input>', headerTemplate: 'Step 3<input type="checkbox" name="step3SelectAll"></input>' },
{ field: "Step4", title: "Step 4", attributes: {style: "text-align: center"}, template: '<input type="checkbox" #= Step4 ? "checked=checked" : "" # ></input>' },
{ field: "Step5", title: "Step 5", attributes: {style: "text-align: center"}, template: '<input type="checkbox" #= Step5 ? "checked=checked" : "" # ></input>' }
],
editable: "inline"
});
$("#step3SelectAll").change(function(){
if ($('#step3SelectAll').is(':checked')) {
$('.Step3').prop('checked', true);
}
else
{
$('.Step3').prop('checked', false);
}
});
// Start of pseudo-code
$("#grid.row.Step3").change(function() {
// Get dataSource from Grid
// Not sure how this is done, examples seen have separate dataSources which is against coding requirements
// Set all row cells prior to Step 3 as Selected
dataSource.row.Step1.value = "true";
dataSource.row.Step2.value = "true";
// Set all tor cells after to Step 3
dataSource.row.Step4.value = "false";
dataSource.row.Step5.value = "false";
});
});
EDIT: Понял, как выбрать/отменить весь столбец, установив столбец (в данном случае на стадии 3) шаблона флажке как имеющий класс (в данном случае «STEP3»), и добавление в дополнительном "$ (" # step3SelectAll "). изменить" функцию. Теперь посмотрим на изменения флажка только для строк.