Kendo Grid复选框实现多选

最新推荐文章于 2025-06-09 15:02:02 发布

Nemo_XP

最新推荐文章于 2025-06-09 15:02:02 发布

阅读量6.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： JQeryUI，easyUI，kendoUI

本文链接：https://blog.youkuaiyun.com/spw55381155/article/details/79896235

JQeryUI，easyUI，kendoUI 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在KendoGrid中实现多选功能，包括使用多选框选择行、改变选中行背景颜色、全选与全不选功能及获取已选中项的ID集合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Kendo Grid多选框实现：多选，选中行变色，再次点击取消变色和选中如下图：

@#$%^&^&* shit, 图挂了

首先是绑定多选框的代码：

.ClientTemplate(@"<input type='checkbox' value='#=PRODUCT_ID#' name = 'checkBox' onclick='SelectProduct();' />").Width(40);
);

同时绑定点击事件

.Events(events=>events.Change("SelectClick"))

然后点击行选中复选框的代码：

function SelectClick(e) {

if (this.select().find('input[type=checkbox]').attr('checked')) {

this.select().find('input[type=checkbox]').removeAttr('checked');

} else {

this.select().find('input[type=checkbox]').attr('checked', 'true');
}

SelectProduct();
}

选中复选框行变色的代码：

function SelectProduct() {

var grid = $("#proGrid").data("kendoGrid");

$.each(grid.tbody.find('tr'), function () {

if ($(this).find('input[type=checkbox]').attr('checked')) {

$(this).addClass('k-state-selected');

} else {
$(this).removeClass('k-state-selected');
}

})

}

全选全不选的代码：

var boAllSel = false;

//全选

function AddAllSel() {

if (boAllSel) {

$("input[type=checkbox]").removeAttr("checked");//取消全选

$('#btnAllSel').text('全 选');

} else {

$("input[type=checkbox]").attr("checked", 'true');//全选

$('#btnAllSel').text('取 消');

}

boAllSel = !boAllSel;

SelectProduct();

}

获取选中ID集合的代码：

var arr = $("#productWindow").find("input[type=checkbox]:checked"); //获取集合

var products = "";

for (var i = 0; i < arr.length; i++) {

products += "'" + arr[i].value + "',";

} //处理成字符串（ajax参数）