Question

此问题的背景以电网为中心，展示了工作项目任务的进展。每行代表一个工作项，该工作项遵循设定的步骤模式，其中一些是针对每个工作项执行的，或者是同时对所有工作项执行的。

简介是在标题中为所有工作项同时执行的复选框提供了一个复选框，选中此复选框后，将检查该列中的所有复选框。

此外（我理解这可能是一个单独的问题，但我包括这个，因为它是我遇到的同一个问题的一部分），每当检查一行中的复选框时，该行中的所有先前复选框都是也查了一下。它还表示，如果无意中检查了特定复选框后面的任何复选框，则取消选中它，但我认为这对于行单元格复选框的“选择”代码是一个小的补充。

我的理解是在列标题复选框中有一个“on click”事件，触发一个迭代行并在该列中选择/取消选择复选框的函数。这些复选框反过来会有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）模板复选框设置为具有类（在本例中为“Step3”）并添加附加“$（”），找出如何选择/取消选择整列的方法＃step3SelectAll“）。改变”功能。现在查看仅限行的复选框更改。

Answer 1

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

Kendo Grid列条目：

{ 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”，属性：{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”）中使用了“#`”。

Kendo Grid和复选框 - 为给定的列选择all，“select all previous”/“取消选择”

2 个答案: