1

我有一个 kendo-UI 网格，其中我使用了 ClientRowTemplates。在每一行中我都有一个复选框，当我从网格中选择一行时，会触发预期的更改事件（我已经实现了多行选择）。当我选中该行的复选框时，我想选择该行，反之亦然，但是当我选中第一次选中行的复选框时，这很好，但是当我取消选中复选框时行没有被取消选择。有什么建议吗。。

感谢您..

我得到的所有答案都比较相似：我知道更改 css 类可以，但是如果用户选择了多行（比如说 20 行）并且其中他只想取消选择一行，在这种情况下，我给了他一个复选框，以便他可以取消选择那个 perticuler 行，在这种情况下我必须阻止更改事件，因为当我要选中复选框时，所有选定的行都将被取消选中 \\ 注意：如果用户选择行的复选框，则会自动选中排

让我知道在更改网格事件之前可以触发的任何检查框事件

4

5 回答 5

3

在复选框取消选中事件时，删除类k-state-selected和tr属性aria-selected="true"
仅删除类tr可能会导致冲突，aria-selected因为该行的属性将存在 - 您可以使用浏览器开发人员工具检查它。

$(rowToUnselect).removeAttr('aria-selected');
$(rowToUnselect).removeClass('k-state-selected');

更新：如果您为网格设置了selectable: "multiple row" OR网格change并希望以您想要的方式更改行为，则将其删除，并click为每个tr.

$('#grid tbody tr').on('click', function(){
    //select-deselect check-box
    //accordingly, add/remove 'k-state-selected'
    //add/remove attribute 'aria-selected'
});
于 2013-07-02T06:46:46.817 回答
2

感谢所有关心我问题的人......你们向我提出了很多对我很有帮助的事情......但我创建了自己的解决方案，我将复选框放在一个类似于......的 div 中。

<div id='checkcontainerdiv' onmouseup='CheckMouseDown(event);'>
  <input type='check' />
</div>

然后在我写的 CheckMouseDown(event) 函数中..

function CheckMouseDown(event) {
    var CheckContainerDiv = $(event.target);
    var gridrow = CheckContainerDiv.parents().filter("tr#gridrow");
    var IsSelected = gridrow.attr("aria-selected");
    if (IsSelected != null && IsSelected.trim().toLowerCase() == "true") {
        //Now i removed gridrow from $("#MyEmailGrid").data("kendoGrid").select() collection
    }
    else {
        //Now i added gridrow to $("#MyEmailGrid").data("kendoGrid").select() collection
    }
}

现在你们都会想我是如何阻止gridview的Change事件的。为此，我添加了网格的 DataBound 事件，这里是...

function GridDataBound() {
    $('#MyGrid').data('kendoGrid').tbody.on('mousedown', 'div#checkcontainerdiv', function (e) {
        e.stopImmediatePropagation();
    });
}

当 'div#checkcontainerdiv' 的 'mousedown' 事件发生时，此处的 e.stopImmediatePropagation 将停止网格的更改或任何默认事件

如果有同样的问题，请享受..再次感谢..

于 2013-07-02T09:27:46.347 回答
0

试试这个：

$(rowToDeselect).removeClass("k-state-selected");

或这个：

如何在 kendoui 中取消选择网格记录

于 2013-07-02T06:43:17.100 回答
0

当未选中复选框时，您必须手动执行此操作（或以某种方式将其绑定以自动完成）我在他们的 api 中看不到任何 unselect 方法，因此您可以尝试一种丑陋的 CSS 方式。只需在网格中执行此操作，即可从选定行中删除选定的 CSS 类

$('tr.k-state-selected','#grid').removeClass('k-state-selected')
于 2013-07-02T06:50:06.573 回答
0

当您的复选框列首先出现在您的网格中时，此功能起作用。OnCheckbox 单击尝试此代码。

ClientTemplate("<input type='checkbox'  #=ID ? checked='checked':'' # class='chkbxchild margin_l30' onclick='SetCheckBOX(this)' />");


function SetCheckBOX(this)
{
  if ($(this).is(':checked')) {
            $(this).parent().parent().attr("class", "k-state-selected");
        }
        else {
            $(this).parent().parent().removeAttr("class", "k-state-selected");
        }

}
于 2013-07-02T08:05:39.150 回答