0

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

摘要是，每个步骤都提供了同时在所有工作项上执行的每个步骤中的复选框，并且在选中此复选框时，请选中该列中的所有复选框。

此外（我知道这可能是一个单独的问题，但是我将其包括在内，因为它是我正在遇到的同一问题的一部分），每当检查一排中的复选框时，还会检查该行中的所有先前复选框。它还表明，如果无意中选中了特定复选框之后的任何复选框，则它们都不会被选中，但我认为这将是对行单元格复选框的“选择”代码的一个小补充。

我的理解是在列标题复选框中有一个“点击”事件触发一个函数，该函数遍历行并选择/取消选择该列中的复选框。反过来，这些复选框将具有 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”来选择/取消选择整个列).change”函数。现在查看仅行复选框更改。

4

2 回答 2

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

于 2013-10-11T09:23:13.520 回答
-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" id="step3SelectAll"></input>'
}

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

于 2014-04-28T12:27:08.077 回答