Question

以下代码是应用程序的示例。当原因字段中有数据时，网格中的复选框将设置为无效。网格允许用户编辑。有没有办法在编辑数据后启用复选框？

输出：

|          | Remark      | Center align |
|:---------|------------:|:------------:|
| [Unable] |     Invalid |     test1    |
| [enable] |             |     test2    |
| [enable] |             |     test3    |

内联编辑后

：

|          | Remark      | Center align |
|:---------|------------:|:------------:|
| [enable] |             |     test1    |
| [enable] |             |     test2    |
| [enable] |             |     test3    |

＆＃13;

var data = [];
    var test = [];
    var userRecord = [{
            reason: "Invalid",
            UserName: "test"
        },
        {
            reason: "",
            UserName: "test1"
        },
        {
            reason: "",
            UserName: "test2"
        }]

    var grid = $("#importgrid").kendoGrid({
        columns: [
            {
                field: "",
                width: "40px",
                template: "<input name='Discontinued' class='checkbox' #= (reason.length > 0)? 'disabled=disabled' : ''# type='checkbox' />"
            },
            {
                field: "reason",
                title: "Remark"
            },
            {
                field: "UserName",
                title: "User Name"
            },
               ],
        dataSource: {
            data: userRecord
        },
        editable: true,
        dataBound: function (e) {
            $(".checkbox").bind("change", function (e) {
                var grid = $("#importgrid").data("kendoGrid");
                var row = $(e.target).closest("tr");
                row.toggleClass("k-state-selected");
                data.push(grid.dataItem(row));
            });
        }
    });

    $("#get").on("click", function () {
        for (var i = 0; i < data.length; i++) {
            $("#importgrid").find("tr[data-uid='" + data[i].uid + "'] td:eq(1)").text("success");
        }
    })

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>

<body>
<div id="importgrid" class="usermgrgrid"></div>


<button class="k-button k-primary" id="get">Submit</button>
</body>

</html>

＆＃13;

Answer 1

你可以通过使用kendo-ui网格的save事件来实现这一点。有关更多参考，请查看以下代码段。

var grid = $("#importgrid").kendoGrid({
    columns: [
        {
            field: "",
            width: "40px",
            template: "<input name='Discontinued' class='checkbox' #= (reason.length > 0)? 'disabled=disabled' : ''# type='checkbox' />"
        },
        {
            field: "reason",
            title: "Remark"
        },
        {
            field: "UserName",
            title: "User Name"
        },
    ],
    dataSource: {
        data: userRecord
    },
    editable: true,
    save: function (e) {
        if (e.values.reason != undefined && e.values.reason == '') {
            $('tr[data-uid="' + e.model.uid + '"] ').find("input[type='checkbox']").prop('disabled', false);
        }
    },
    dataBound: function (e) {
        $(".checkbox").bind("change", function (e) {
            var grid = $("#importgrid").data("kendoGrid");
            var row = $(e.target).closest("tr");
            row.toggleClass("k-state-selected");
            data.push(grid.dataItem(row));
        });
    }
});

如果有任何疑虑，请告诉我。

如何重新启用kendo grid复选框？

1 个答案: