Фон для этого вопроса сосредоточен на сетке, демонстрирующей ход выполнения задач по рабочим элементам. Каждая строка представляет рабочий элемент, который следует заданному шаблону шагов, некоторые из которых выполняются для каждого рабочего элемента или выполняются для всех рабочих элементов одновременно.
Суть в том, что в заголовке должен быть предусмотрен флажок для каждого шага, который выполняется для всех рабочих элементов одновременно, и когда этот флажок установлен, все флажки в этом столбце отмечены.
Кроме того (и я понимаю, что это может быть отдельный вопрос, но я включаю его, поскольку это часть той же проблемы, с которой я сталкиваюсь), всякий раз, когда установлен флажок в строке, все предыдущие флажки в этой строке также проверяются. Также считается, что любые флажки после определенного флажка снимаются, если они непреднамеренно отмечены, но я предполагаю, что это будет незначительным дополнением к коду «выбрать» для флажка ячейки строки.
Я понимаю, что событие «при щелчке» в флажке заголовка столбца запускает функцию, которая перебирает строки и выбирает/снимает флажки в этом столбце. Эти флажки, в свою очередь, будут иметь события onclick и onchange (поскольку флажок на самом деле не «щелкнут»?), которые выбирают все флажки до этого флажка и отменяют эти флажки дальше по строке.
Ниже приведен пример кода, отображающего таблицу, и некоторый псевдокод. пример использует статические данные в качестве доказательства концепции для клиента, но в конечном итоге будет взаимодействовать с базой данных SQL. Я рад, что мне показали вопрос, который отвечает на любой аспект этого вопроса, но, честно говоря, вопросы, которые могут ответить на эти вопросы, не очень ясны для меня или лучше подходят для разных пользовательских интерфейсов/языков. .
$(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";
});
});
РЕДАКТИРОВАТЬ: Выяснили, как выбрать/отменить выбор всего столбца, установив флажок шаблона столбца (в данном случае Шаг 3) как имеющий класс (в данном случае «Шаг 3») и добавив дополнительный «$("#step3SelectAll" .change".функция. Теперь рассмотрим изменения флажка только для строк.
