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

问题描述

我使用Telerik的剑道网格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.

现在，当我检查了全选复选框，所有复选框被选中（每个行），因为他们应该。

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

我想要做的。我希望能够在某行双击并有chechbox检查变化 - 如果它未被选中，一个DBL点击将检查反之亦然

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.

另外，作为剑道网格允许用户选择多（鼠标按下，拖动和MouseUp - 选择桌面上的图标时等），我想有这样，当用户执行此操作，所有选定行已相应的复选框选中，并再次，如果他们已经检查，那么这一行动将导致复选框选中成为

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

code检查所有复选框当全选复选框被选中：

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总初学者所以任何帮助将非常AP preciated。

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

推荐答案

您的例子似乎工作：的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);   
        }
    })
}

我已经更新了我摆弄新的code： http://jsfiddle.net/ scaillerie / axpmF / 2 / 。

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