Kendo 网格 MVC：使用主复选框更改所有行中的值

Question

首先，我是一个javascript菜鸟，所以我的代码既不漂亮也不聪明。 :(

我有一个非常基本的 Kendo 网格，我向其中添加了两列。第一列包含一个复选框（我称它们为 minionCheckBox），第二列包含一个布尔值（来自数据源），我将其称为 isChecked，默认设置为 false。

此外，我在 table header 中有一个 masterCheckBox，它应该切换所有 minions。

两种复选框类型都是这样添加的：

@(Html.Kendo().Grid<MVC5KendoTestWeb.Models.DTOs.DTO_User>()
        .Name("TestGrid")
        .Columns(columns =>
        {
            columns.Template(@<text></text>)
                .HeaderTemplate("<input class='checkbox masterCheckBox' type='checkbox' /> <strong>Alle</strong>")
                .ClientTemplate(@"
                    <input class='checkbox minionCheckBox' type='checkbox' data-bind='checked: isChecked' #= isChecked ? checked='checked' : '' # />")
                .Width(80);
            columns.Bound(cn => cn.isChecked).HtmlAttributes(new { @class = "isChecked" });
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Create(create => create.Action("CreateUserData", "XXX"))
            .Read(read => read.Action("ReadUserData", "XXX"))
            .Update(update => update.Action("UpdateUserData", "XXX"))
            .Destroy(destroy => destroy.Action("DestroyUserData", "XXX"))
            .Model(model =>
            {
                model.Id(cn => cn.ID);
            })
            .PageSize(20)
            .ServerOperation(true)
        )
        .Editable(editable => editable.Mode(GridEditMode.PopUp))
)

每当我在同一行中切换复选框时，我想更改 isChecked 的值。这似乎按照我的预期使用以下代码工作：

var grid = $("#TestGrid").data("kendoGrid");
grid.tbody.on("change", function (e) {
    var isMinionChecked = $(e.target).prop("checked");
    var row = $(e.target).closest("tr");
    var item = grid.dataItem(row);
    if (isMinionChecked) {
        item.set("isChecked", true);
    } else {
        item.set("isChecked", false);
    }
    if (!item.isChecked) {
        var isMasterChecked = $(".masterCheckBox").prop("checked");
        if (isMasterChecked) {
            $('.masterCheckBox').prop('checked', false);
        }
    }
})

这是我的问题：现在我想在每次检查 masterCheckBox 时对所有行执行相同的操作。这是我的代码：

var grid = $("#TestGrid").data("kendoGrid");
$(".masterCheckBox").on("click", function () {
  var isMasterChecked = $(".masterCheckBox").prop("checked");
  grid.table.find(".minionCheckBox").each(function () {
    var row = $(this).closest("tr");
    var item = grid.dataItem(row);
    if (isMasterChecked) {
      $(this).prop("checked", true);
      item.set("isChecked", true);
    } else {
      $(this).prop("checked", false);
      item.set("isChecked", false);
    }
  })
})

但是，它只会切换第一行中的复选框并将该行中的 isChecked 设置为 true。当我删除两条 item.set 行时，它可以完美运行并选中或取消选中所有复选框。

我知道代码还不完美，我还需要添加一些东西，但据我所知，现在至少应该做这两件事：切换所有复选框并将所有 isChecked 字段设置为正确的值。

谁能帮我解决这个问题？

Answer 1

function toggleCheckbox() {
    $(".masterCheckBox").on("click", function (e) {
        var grid = $("#TestGrid").data("kendoGrid");
        var ds = grid.dataSource.data();
        var isMasterChecked = $(".masterCheckBox").prop("checked");

        for (var i = 0; i < ds.length; i++) {
            var dataItem = ds[i];
            dataItem.isChecked = isMasterChecked;
        }
        grid.refresh();
    })
}

function registerOnChangeEvent() {
    var grid = $("#TestGrid").data("kendoGrid");
    grid.tbody.on("change", function (e) {
        var isMinionChecked = $(e.target).prop("checked");
        var isMasterChecked = $(".masterCheckBox").prop("checked");
        var row = $(e.target).closest("tr");
        var item = grid.dataItem(row);
        var oldChecked = item.get("isChecked");
        if (isMinionChecked != oldChecked) {
            item.set("isChecked", isMinionChecked);
        }

        if (!isMinionChecked && isMasterChecked) {
            $('.masterCheckBox').prop('checked', false);
        }
    })
}

Kendo 网格 MVC：使用主复选框更改所有行中的值

Kendo Grid MVC: Change a value in all rows with a master checkbox

model-view-controller

checkbox

asp.net-mvc

jquery

kendo-grid