Php 剑道网格和复选框-为给定列选择“全部”；选择所有以前的"；/&引用；取消选择“之后全部”；对于给定的行'；s细胞

这个问题的背景集中在一个网格上，该网格展示了工作项任务的进度。每一行表示一个遵循一组步骤模式的工作项，其中一些步骤是针对每个工作项执行的，或者是同时针对所有工作项执行的

简要说明是，在标题中为同时对所有工作项执行的每个步骤提供一个复选框，当选中此复选框时，该列中的所有复选框都将被选中

此外（我知道这可能是一个单独的问题，但我将其包括在内，因为这是我遇到的同一问题的一部分），每当选中一行中的复选框时，该行中以前的所有复选框都将被选中。另外，如果某个复选框被意外选中，则该复选框后面的任何复选框都将被取消选中，但我认为这将是对行单元格复选框的“选择”代码的一个小添加

我的理解是在列标题复选框中有一个“点击”事件，触发一个函数，该函数遍历行并选择/取消选择该列中的复选框。这些复选框依次具有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";
    });
});

$（文档）.ready（函数（）{
$（“#网格”）.kendoGrid({
数据源：
{
运输：
{
阅读：{
url:“资产/数据/生产进度.json”，
键入：“获取”，
数据类型：“json”
},
parameterMap：功能（选项、操作）{
if（操作！=“读取”&&options.models）{
返回{models:kendo.stringify（options.models）}；
}
其他的
{
返回“”；
}
}
},
模式：
{
型号：
{
id:“项目”，
领域：
{
项：{可编辑：false}，
步骤1:{type:“boolean”，可编辑：true}，
步骤2:{type:“boolean”，可编辑：true}，
步骤3:{type:“boolean”，可编辑：true}，
步骤4:{type:“boolean”，可编辑：true}，
步骤5:{type:“boolean”，可编辑：true}
}
}
}
},
可滚动：false，
可分页：false，
栏目：[
{字段：“项”}，
{字段：“步骤1”，标题：“步骤1”，属性：{样式：“文本对齐：中心”}，模板：''}，
{字段：“Step2”，标题：“Step2”，属性：{style:“text align:center”}，模板：''}，
{field:“Step3”，属性：{style:“text align:center”}，模板：''，headerTemplate:'Step3'}，
{字段：“Step4”，标题：“Step4”，属性：{style:“text align:center”}，模板：''}，
{字段：“步骤5”，标题：“步骤5”，属性：{样式：“文本对齐：中心”}，模板：''}
],
可编辑：“内联”
});
$（“#step3SelectAll”）.change（函数（）{
如果（$（“#step3SelectAll”）。为（“：选中”）{
$（'.Step3'）.prop（'checked'，true）；
}
其他的
{
$（'.Step3'）.prop（'checked'，false）；
}
});
//伪代码的开始
$（“#grid.row.Step3”）.change（函数（）{
//从网格中获取数据源
//不确定如何做到这一点，看到的示例有单独的数据源，这与编码要求不符
//将步骤3之前的所有行单元格设置为选中
dataSource.row.Step1.value=“true”；
dataSource.row.Step2.value=“true”；
//将之后的所有tor单元设置为步骤3
dataSource.row.Step4.value=“false”；
dataSource.row.Step5.value=“false”；
});
});

---

编辑：通过将列的（在本例中为步骤3）模板复选框设置为具有类（在本例中为“Step3”），并添加额外的“$（“#step3SelectAll”）.change”功能，了解如何选择/取消选择整个列。现在查看“仅行”复选框的更改。

我正在回答问题的一部分并将其关闭，以便我可以在单独的问题中更专注于问题的其余方面。对于正在阅读本文的读者，我通过将标题模板设置为包含特定类来解决“在列中全选”问题，然后使用一个函数，该函数在该类发生任何更改时触发：

剑道网格列条目：

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

{字段：“步骤3”，属性：{style:“文本对齐：中心”}，模板：''，标题模板：'Step3'}

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

字段：“步骤3”，
属性：{style:“文本对齐：中心”}，
模板：“”，
headerTemplate:“步骤3”
}

使用

id=“step3SelectAll”

而不是

name=“step3SelectAll”

，因为您在$（“#step3SelectAll”）中使用了“#`”

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