取消单击Kendo网格中的绑定复选框-Java 学习之路

请参阅此问题：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可能是多余的 . 我最初从我的命令按钮复制了这个代码，然后添加了复选框 . 这里的计划是如果可以的话去除按钮 . ）

2 回答

0

试试 $(e.target).attr('checked', isActive); 而不是 $(e.target).checked= isActive; .

它最有效 .

Update:
也许函数在更改值之前运行，因此您必须将值更改为 !isActive . 试试吧！

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

你也可以使用removeAttr（） .

回复于 2024-04-19T20:08:35+08:00

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

{ 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');

}）;

回复于 2024-04-19T20:08:35+08:00

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

2 回答

相关问题