剑道网格:如何检查选定行的所有复选框? [英] Kendo grid: How to check all checkboxes of selected rows?

问题描述

我将 Telerik Kendo 网格与 MVC 和 C# 一起使用.我有一个网格，填充了一些数据并添加了一个复选框列 - 用于让用户可以全选.

I am using the Telerik Kendo grid with MVC and C#. I have a grid, populated with some data and have added a checkbox column - used so that the user can select all.

现在，当我选中selectAll"复选框时，所有复选框都被选中(每行一个)，因为它们应该是.

Now, when I check the "selectAll" checkbox, all checkboxes are checked (one for each row), as they should be.

我想要做什么:我希望能够双击一行并更改检查框检查 - 如果未选中，dbl-click 将检查它，反之亦然.

What I want to do: I want to be able to double-click on a row and have the chechbox check change - if it is unchecked, a dbl-click will check it and visa versa.

此外，由于 Kendo 网格允许用户选择多个(鼠标向下、拖动和鼠标向上 - 就像在桌面上选择图标时一样)，我希望拥有它，以便当用户执行此操作时，所有选定的行会再次选中它们的复选框，如果它们已经被选中，那么此操作将导致复选框变为未选中状态.

Also, as the Kendo grid allows the user to select many (mousedown, drag and mouseup - like when selecting icons on the desktop), I'd like to have it so that when the user does this action, all the selected rows have their checkboxes checked and again, if they are already checked, then this action will cause the checkboxes to become unchecked.

详情:

• 网格名称:网格
• JQuery 版本:1.8.3
• MVC 4
• 最新的KendoUI

选中selectAll"复选框时检查所有复选框的代码:

Code for checking all checkboxes when the "selectAll" checkbox is checked:

$(document).ready(function () {
var grid = $('#Grid').data('kendoGrid');
    grid.thead.find("th:last")
    .append($('<input class="selectAll" type="checkbox"/>'))
    .delegate(".selectAll", "click", function () {
        var checkbox = $(this);
        grid.table.find("tr")
            .find("td:last input")
            .attr("checked", checkbox.is(":checked"))
            .trigger("change");
    });
});

我是 Javascript 的完全初学者，因此非常感谢任何帮助.

I am a total beginner with Javascript so any help would be much appreciated.

推荐答案

您的示例似乎有效:http://jsfiddle.net/scaillerie/axpmF/ .

Your example seems to work : http://jsfiddle.net/scaillerie/axpmF/ .

您只需在 document.ready 事件的开头添加，将网格设置为 kendoGrid:

You just have to set your grid as a kendoGrid by adding at the beginning of your document.ready event :

$('#Grid').kendoGrid();

并确保表格的所有最后一个单元格中都有一个复选框...

and to be sure that there is a checkbox in all last cells of your table...

要更新选定行中复选框的状态，您必须在网格的每个单元格上注册事件 dblclick:

For updating the state of the checkboxes in the selected rows, you have to register the event dblclick on each cell of the grid:

grid.tbody.on("dblclick", "tr", selectAllSelectedRows);

function selectAllSelectedRows() {
    grid.tbody.find("tr").each(function() {
        var $this = $(this),
            ckbox,
            state;

        if($this.hasClass("k-state-selected")) {
            ckbox = $this.find("td:last input");
            state = ckbox.prop("checked");
            ckbox.prop("checked", !state);   
        }
    })
}

我用新代码更新了我的小提琴:http://jsfiddle.net/scaillerie/axpmF/2/ .

I have updated my fiddle with the new code : http://jsfiddle.net/scaillerie/axpmF/2/ .

这篇关于剑道网格:如何检查选定行的所有复选框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！