Question

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

如果用户勾选该框，则其值应为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);
});

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

如何在Kendo UI Grid中创建三态复选框（true / false / null）

1 个答案: