剑道网格和复选框 - 为给定列全选，为给定行的单元格“全选”/“取消全选”

Question

此问题的背景以显示工作项任务进度的网格为中心。每行代表一个工作项，该工作项遵循一组步骤模式，其中一些步骤按工作项执行，或者同时对所有工作项执行。

简介是，在所有工作项同时执行的每个步骤中提供复选框，并在选中此复选框时，检查该列中的所有复选框。

此外，（我理解这可能是一个单独的问题，但我包括这个，因为它是我遇到的同一问题的一部分），只要检查一行中的复选框，那么那行中的所有上一个复选框也检查了。它还表明，如果无意中选中了特定复选框之后的任何复选框，则它们都不会被选中，但我认为这将是对行单元格复选框的“选择”代码的一个小补充。

我的理解是在列标题复选框中有一个“点击”事件触发一个函数，该函数遍历行并选择/取消选择该列中的复选框。这些复选框依次会具有 onclick 和“onchange”（因为复选框实际上并未被“单击”？）事件，这些事件会选中该复选框之前的所有复选框并沿行进一步取消选择这些复选框。

请参见下面的示例代码呈现表格和一些伪代码；该示例使用静态数据作为客户端的概念证明，但最终将与 SQL DB 交互。我很高兴看到一个可以回答这个问题任何方面的问题，但坦率地说，可能回答这些问题的问题对我来说不是很清楚，或者更好地服务于不同的 UI/语言.

$(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" 函数。现在查看仅行复选框更改。

Answer 1

我正在回答问题的一部分并将其关闭，以便在另一个问题中更专注于问题的其余方面。对于那些正在阅读本文的人，我设法通过将标题模板设置为包含特定类来解决“在列中选择所有”问题，然后有一个函数在该类发生任何变化时触发：

剑道网格栏目：

{ 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>' }

选中/取消选中复选框的函数：

$("#step3SelectAll").change(function(){
    if ($('#step3SelectAll').is(':checked')) {
        $('.Step3').prop('checked', true);
    }
    else
    {
        $('.Step3').prop('checked', false);
    }
});

{ field: "Step3", attributes: {style: "text-align: center"}, template: '', headerTemplate: 'Step 3' }

Answer 2

{
    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" id="step3SelectAll"></input>'
}

使用id = "step3SelectAll" 而不是name="step3SelectAll"，因为您在$("#step3SelectAll") 中使用了“#`”。