（3）kendo UI使用基础介绍与问题整理——Grid问题/ Checkbox selection

最新推荐文章于 2021-10-09 15:39:02 发布

weixin_34327223

最新推荐文章于 2021-10-09 15:39:02 发布

阅读量632

点赞数

文章标签： ui

原文链接：http://www.cnblogs.com/lindaCai/p/8252146.html

版权

本文详细介绍了KendoUI Grid中选中行与Checkbox选中的使用方法，包括简单的选中行、自定义行选中、Checkbox单选及多种选中状态的并存处理方式。此外还提供了相关API方法，帮助开发者更好地控制Grid中的选中状态。

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

kendo UI的grid提供了选中行的功能，先上一张官网的截图：

一、简单说明

selectable 可选参数

"row" - the user can select a single row. 行
"cell" - the user can select a single cell. 项
"multiple, row" - the user can select multiple rows. 多行
"multiple, cell" - the user can select multiple cells. 多项

通常使用选择的时候，用法是 selectable: true 这个时候可以使用行选中。

上面说的选择是变色的那种选中。如何需要的是checkbox选中，那么需要设置

persistSelection: true,

columns:[{ selectable:true}]

行选中和checkbox选中不可以同时使用，会存在冲突，实际需要的时候需要自定义，在我做的项目中需要两种功能并存的时候，使用的是自定义行选中，checkbox使用grid提供的方法。

二、行选中和checkbox选中并存时的处理

下面是我自定义的点击行然后选中行的事件

//点击行选中事件
$("#grid").on("click", "tbody tr[role='row'] td", function () {
    if ($(this).html().indexOf("k-checkbox") < 0) {//判断点击项是不是checkbox，不是的情况下再进行行选中的操作
        $("#grid tr").removeClass("chooseRow");
        $(this).parent().addClass("chooseRow"); //添加行选中的样式
        var index = $(this).parent().index();   //获取选中行的下标
        var selectedId = $("#grid").data("kendoGrid").dataSource.at(index).Id;  //获取选中行的ID
    }

});

可以从代码中了解到，是通过chooseRow这个class标志选中行的，同时我给带有chooseRow的行设置了样式。

上面实现的是行选中的单选。也可以自己通过对上面方法的修改实现多选。

三、checkbox实现单选

实现这个功能，首先要去掉全选的checkbox，代码如下：

//加载grid列表加载的后面
$("input[aria-label='Select all rows']").next(".k-checkbox-label").remove();
$("input[aria-label='Select all rows']").remove();

然后在点击checkbox的时候做判断，实现只能选中一行

// 单选
$(document).on("click", "#grid tbody tr[role='row'] td", function () {
        var index = $(this).parent().index();   //获取选中行的下标
        var grid = $("#grid").data("kendoGrid");
        grid.select("tr:eq(" +index + ")");
        var localCheck = $("#grid").find(".k-checkbox:checked"); 
        if(localCheck.length > 1) {
           grid.clearSelection();
           grid.select("tr:eq(" +index + ")");
        }
});

四、selection相关方法

（1）指定某一行进行选中的方法

//方法1：
var grid = $("#grid").data("kendoGrid");
grid.select("tr:eq(0)");

//方法2：
var grid = $("#grid").data("kendoGrid");
var uid = grid.dataSource.at(0).uid;
grid.select("tr[data-uid='" + uid + "']");

（2）输出选中数据的方法

//方法一：
var grid = $("#grid").data("kendoGrid");
grid.select();    //输出选中行的数据（当前页）

//方法二：
var grid = $("#grid").data("kendoGrid");
console.log(grid.selectedKeyNames());        //输出选中行的关键字（支持分页） 注： 要求这个grid必须设置schema的model，输出的选中项数据就是model设定的值，如mode设置的是id，那么输出的值就是选中行的id值。

（3）清除选中项

//方法一：
var grid = $("#grid").data("kendoGrid");
grid.clearSelection();    //只能清除当前页的选中项

//方法二：
var grid = $("#grid").data("kendoGrid");
grid._selectedIds={};    //可以清除所有页的选中项

不过在实际应用中，会发现上面清除选中项的“方法二”，存在无法清除当前页面选中样式的问题，所以，我配合使用了grid.clearSelection()。

转载于:https://www.cnblogs.com/lindaCai/p/8252146.html