jQuery 剑道网格：如何检查选定行的所有复选框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13810258/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Kendo grid: How to check all checkboxes of selected rows?
提问by pookie
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.
我正在使用带有 MVC 和 C# 的 Telerik Kendo 网格。我有一个网格，填充了一些数据并添加了一个复选框列 - 用于让用户可以选择全部。
Now, when I check the "selectAll" checkbox, all checkboxes are checked (one for each row), as they should be.
现在，当我选中“selectAll”复选框时，所有复选框都被选中（每行一个），因为它们应该是。
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.
我想要做什么：我希望能够双击一行并更改检查框检查 - 如果未选中，dbl-click 将检查它，反之亦然。
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.
此外，由于 Kendo 网格允许用户选择多个（鼠标按下、拖动和鼠标抬起 - 就像在桌面上选择图标时一样），我希望拥有它，以便当用户执行此操作时，所有选定的行都有它们的复选框被再次选中，如果它们已经被选中，那么这个操作将导致复选框被取消选中。
Details:
细节：
- Grid name: Grid
- JQuery version: 1.8.3
- MVC 4
- Latest KendoUI
- 网格名称： 网格
- jQuery 版本：1.8.3
- MVC 4
- 最新的剑道UI
Code for checking all checkboxes when the "selectAll" checkbox is checked:
选中“selectAll”复选框时检查所有复选框的代码：
$(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");
});
});
I am a total beginner with Javascript so any help would be much appreciated.
我是 Javascript 的初学者，因此非常感谢任何帮助。
回答by Samuel Caillerie
Your example seems to work : http://jsfiddle.net/scaillerie/axpmF/.
您的示例似乎有效：http: //jsfiddle.net/scaillerie/axpmF/。
You just have to set your grid as a kendoGrid by adding at the beginning of your document.readyevent :
您只需要通过在document.ready事件的开头添加将您的网格设置为 kendoGrid ：
$('#Grid').kendoGrid();
and to be sure that there is a checkbox in all last cells of your table...
并确保表格的所有最后一个单元格中都有一个复选框......
EDIT :
编辑 ：
For updating the state of the checkboxes in the selected rows, you have to register the event dblclickon each cell of the grid:
要更新所选行中复选框的状态，您必须dblclick在网格的每个单元格上注册事件：
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);
}
})
}
I have updated my fiddle with the new code : http://jsfiddle.net/scaillerie/axpmF/2/.
我已经用新代码更新了我的小提琴：http: //jsfiddle.net/scaillerie/axpmF/2/。
