使用复选框选择取消选择 kendo UI Grid 的行

Posted 2023-05-07

【中文标题】使用复选框选择取消选择 kendo UI Grid 的行

【英文标题】：select unselect rows of kendo UI Grid with checkbox

【发布时间】：2013-06-29 10:20:21

【问题描述】：

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

谢谢你..

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

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

【参考方案1】：

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

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

更新：如果您为网格设置了selectable: "multiple row" OR grid change 并希望以您想要的方式更改行为，则将其删除，然后为每个 tr 手动附加 click 事件。

$('#grid tbody tr').on('click', function()
    //select-deselect check-box
    //accordingly, add/remove 'k-state-selected'
    //add/remove attribute 'aria-selected'
);

【参考方案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 将停止网格的更改或任何默认事件

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

【参考方案3】：

试试这个：

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

或者这个：

How to unselect the grid record in kendoui

【讨论】：

是的，我知道它可以工作，但是如果用户选择了多行（比如说 20 行）并且其中他只想取消选择一行，在这种情况下，我给了他一个复选框，以便他可以取消选择那个 perticuler 行，在这种情况下我必须阻止更改事件 \\\ 注意：如果用户选择行，则会自动检查行的复选框

【参考方案4】：

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

$('tr.k-state-selected','#grid').removeClass('k-state-selected')

【讨论】：

然后只需将复选框的状态与每行的 k-state-selected 类绑定（如果需要，还可以使用 aria-selected 属性）这样一个就可以改变另一个而无需担心任何东西。

【参考方案5】：

当您的复选框列位于您的网格中时，此功能起作用。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");