如何在 Kendo UI Grid 中创建三态复选框（真/假/空）

Question

我使用 ASP.NET MVC 4 和 Kendo UI 开发了一个 Web 应用程序。它有一个包含复选框列的网格。我需要在该复选框列中有一个三态复选框（真、假、空）。

如果用户选中该框，则其值应为true，如果用户取消选中该框，则其值应为false。重要的是，如果用户没有勾选或取消勾选就离开了，那么它的值应该是null。

剑道网格中是否可以有三态复选框？如果是，该怎么做？

Answer 1

根据this 文章，将复选框设置为indeterminate 状态的唯一方法是以编程方式进行。问题是每次更新值时，包含复选框的单元格都会重新绘制，因此第三个状态会被删除。

您可以通过以下方式检查：

var grid = $("#stocks_tbl").kendoGrid({
    dataSource: [
        { id: 1, active: true, symbol: "AAPL" },
        { id: 2, active: false, symbol: "AMZN" },
        { id: 3, active: false, symbol: "GOOG" }
    ],
    editable  : true,
    columns   : [
        { field: "symbol", title: "Tick" },
        {
            field   : "active",
            template: '<input class="active" type="checkbox" #= active ? checked="checked" : "" # />'
        }
    ]
}).data("kendoGrid");

$(document).on("change", ".active", function (ev) {
    $(ev.currentTarget).prop("indeterminate", true);
    $(ev.currentTarget).prop("checked", true);
    alert("Shall I continue?");
    var item = grid.dataItem($(this).closest("tr"));
    item.set("active", true);
});

如果您单击复选框，您将看到第三个状态，直到您关闭对话框并且我们将值设置为复选框。如果我们不设置它，该值不会反映在模型中。