Question

请参阅此问题：Adding bindeable checkbox column to grid

我在kendo网格中有一个布尔值的复选框。当用户单击该复选框时，会向它们显示一个引导模式对话框，该对话框会提示它们确认它们正在执行的操作。（不要担心它的作用。这很好。）

问题是，如果他们取消确认对话框，我想撤消他们对复选框的更改。（我需要撤消它以使网格与数据保持同步，因为只有在单击“确定”时才会发生更新基础数据的调用。）

模板如下所示：

{
  title   : "Active",
  field   : "uaa",
  template: "<input name='active' class='userActiveToggle' type='checkbox' data-bind='checked: uaa' #= uaa ? checked='checked' : '' #/>"
}

javascript函数： “$（'。modal-confirm .cancel'）。click”函数中的代码不起作用。它会触发，但不会将复选框设置回原始状态。（而且，肯定有更好的方法可以做到这一点......在单击函数内部都需要取消绑定;否则它们将被绑定多次。但这不是我现在主要关注的问题。）

$("#AccountsGrid").on("click", ".userActiveToggle", function (e) {
    var grid = $('#AccountsGrid').data().kendoGrid;
    var tr = $(e.target).closest("tr");
    var data = grid.dataItem(tr);

    $('.modal-confirm').modal({ show : false, keyboard : true, backdrop : true });
    $('.modal-confirm .modal-header h3').text('Modify User');
    var userName = data.uau;
    var isActive = data.uaa;
    data.set('uaa', isActive);
    var modifyDescription =  isActive ?  'deactivate' :  'activate';

    $('.modal-confirm .modal-body p').html('Are you sure you want to '+ modifyDescription + ' the user, ' + userName + '?');
    $('.modal-confirm .cancel').html('Cancel');
    $('.modal-confirm .submit').html('OK').addClass('btn-danger');

    $('.modal-confirm .submit').click(function(e){
        if (hc.ActivateUser(userName, !isActive))
            data.set('uaa', !isActive);
        $('.modal-confirm').modal('hide');
        $('.modal-confirm .submit').unbind().on('click', null);
    });

    $('.modal-confirm .cancel') .click(function(e){
        grid.closeCell();
        var col = $(this).closest('td');
        grid.editCell(col);
        alert(isActive);
        data.set('uaa', isActive);
        $(e.target).checked= isActive;
        grid.closeCell(col);
        $('.modal-confirm .cancel').unbind().on('click', null);
    });

    $('.modal-confirm').modal('show');
});

我也尝试禁用模板中的复选框，但是该函数根本不会触发。如果有可能，有人可以告诉我吗？如果不是，我可以使用命令按钮。

（哦，在提交点击模式时调用data.set可能是多余的。我最初在添加复选框之前从命令按钮复制了这个代码。这里的计划是删除按钮，如果我可以。）

Answer 1

尝试使用$(e.target).attr('checked', isActive);代替$(e.target).checked= isActive;。

最有效。

<强>更新
也许函数在更改值之前运行，因此您必须将值更改为!isActive。试试吧！

更新＃2：
并且不要忘记使用e.preventDefault ...如果是这样，您将不得不手动更改checked参数。这就是你需要的。仅在确认后更改变量。

你也可以使用removeAttr（）。

Answer 2

就像我讨厌回答我自己的问题一样......答案是忘记复选框，然后使用带有按钮的命令替换它，而是根据绑定数据动态更改按钮的文本。我的字段定义现在是：

    { field: 'Manage users', template: '<a href="\\#" class="k-button link">#= uaa ? "Deactivate user" : "Activate user" #</a>', width: 125 },

javascript功能如下。（因为这是一个带模板的命令，原来的问题，即需要撤消用户点击更改了复选框的状态，不再是问题。我仍然使用确认对话框，但数据只是改变了当用户单击“确定”时。）

$("#AccountsGrid").on("click", ".link", function (e) {
var grid = $('#AccountsGrid').data().kendoGrid;
var tr = $(e.target).closest("tr");
var data = grid.dataItem(tr);

$('.modal-confirm').modal({ show : false, keyboard : true, backdrop : true });
$('.modal-confirm .modal-header h3').text('Modify User');
var userName = data.uau;
var isActive = data.uaa;
var modifyDescription =  isActive ?  'deactivate' :  'activate';

$('.modal-confirm .modal-body p').html('Are you sure you want to '+ modifyDescription + ' the user, ' + userName + '?');
$('.modal-confirm .cancel').html('Cancel');
$('.modal-confirm .submit').html('OK').addClass('btn-danger');

$('.modal-confirm .submit').click(function(e){
    if (hc.ActivateUser(userName, !isActive))
        data.set('uaa', !isActive);
    $('.modal-confirm').modal('hide');
    $('.modal-confirm .submit').unbind().on('click', null);
});

$('.modal-confirm').modal('show');

}）;

取消单击Kendo网格中的绑定复选框

2 个答案: