javascript - 基于另一个列值启用或禁用剑道网格列

Question

我有一个剑道网格，里面有一个复选框，它是使用客户端模板呈现的。如果选中该复选框，那么我希望启用与其相邻的列，如果未选中该列，则应禁用该列，即用户不应该能够对其进行编辑或输入。我尝试通过将编辑事件绑定(bind)到网格来做到这一点，但只有当网格进入编辑模式时才会调用编辑事件，并且在对网格进行更改时不会调用该函数。非常感谢任何指导。

代码片段:

debugger;

function OnGridChange(e) {

    console.log("grid edit mode",e);

    var model = $("#AppAccountInternalGrid").data("kendoGrid");

    console.log("data source edit mode");

    if (e.model.Roll == "true")


        $(e.container).find('input[name="RollupName"]').attr("disabled", false);

    else

        $(e.container).find('input[name="RollupName"]').attr("disabled", true);


}

       @(Html.Kendo().Grid(Model.App_Client_Mapping)
    .Name("AppAccountInternalGrid")
   .Events(ev=>ev.Edit("OnGridChange"))

.Columns(columns =>
{

    columns.Bound(p => p.AccountMappingID).Hidden().Title("AccountMappingID").Width(130);


    columns.Bound(p => p.ExternalAccount).Title("ExternalAccount").Width(150);         

    columns.Bound(p => p.Roll).ClientTemplate("<input  onchange='OnGridChange(#=AccountMappingID#)' type='checkbox' " +
                            "#=Roll? 'checked=checked' : '' #" +
                            "disabled='disabled' </input>").Width(150);


    columns.Bound(p => p.RollupName).Title("RollupName").Width(150).HtmlAttributes(new{@class="disabled"});

    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(150);



})


     .Editable(editable => editable.Mode(GridEditMode.InLine))          
     .ColumnMenu()
     .DataSource(dataSource => dataSource
             .Ajax()
      //.Events(ev=>ev.("OnGridChange"))
        .PageSize(50)
        .Model(model =>
        {
            model.Id(p => p.AccountMappingID);


        }


        )

     .Update(update => update.Action("Editing_Update", "AppAccounts", new { clientid = @clientid }))

 )



            )

Roll 在模型中是 bool 属性，渲染为复选框。最初，未勾选复选框，因此用户无法编辑 rollupname。但是当用户进入编辑模式并勾选复选框时，用户应该能够编辑 rollname。默认情况下，我希望 rollupname 被禁用。它应该在选中复选框时启用。

Answer 1

我在剑道网格中有一个类似的案例。您应该知道的一件事是，当网格进入编辑模式时，该行的字段将被聚焦。从那个 Angular 来看，你可以做我所做的。

一个。当网格进入编辑模式时，可以使用字段名称调用您的复选框(在您的示例中为 Roll)。在编辑事件中，您应该检查是否选中了 Roll 元素。您将获得的值将是行的值。那时你可以将你的输入(我猜是 RollUpName)设置为禁用

$("#RollUpName").prop("disabled", true);

为了动态地工作，您应该在复选框的更改事件上添加一个事件监听器。可能通过使用一些类并将其输入到您的客户端模板中。每次更改复选框时，将更改的复选框将位于可编辑行中。此时，您可以用相同的方式更改 RollUpName 的可编辑模型。