如何在多选模式的KendoUI Grid中反转当前行选中状态？

核心思路 #

通过KendoUI Grid的API获取当前所有行及已选中行的标识，遍历每一行切换其选中状态——已选中的取消选中，未选中的设置为选中。

基于DOM行的实现代码 #

// 获取Grid实例
var grid = $("#grid").data("kendoGrid");
// 获取所有数据行（过滤掉表头、分页行等非数据行）
var allRows = grid.tbody.find("tr[data-uid]");
// 获取已选中行的UID集合
var selectedUids = grid.select().map(function() {
    return $(this).data("uid");
}).get();

// 遍历所有行，反转选中状态
allRows.each(function() {
    var row = $(this);
    var uid = row.data("uid");
    var isSelected = $.inArray(uid, selectedUids) !== -1;
    
    if (isSelected) {
        grid.clearSelection(row);
    } else {
        grid.select(row);
    }
});

基于数据项的实现代码 #

如果需要结合数据源操作，也可以通过数据项的UID定位行并切换状态：

var grid = $("#grid").data("kendoGrid");
// 获取数据源中所有数据项
var allDataItems = grid.dataSource.data();
// 获取已选中的数据项
var selectedItems = grid.selectedItems();
// 转换为UID集合
var selectedUids = $.map(selectedItems, function(item) {
    return item.uid;
});

// 遍历数据项，对应切换行的选中状态
allDataItems.forEach(function(item) {
    var row = grid.table.find("tr[data-uid='" + item.uid + "']");
    if ($.inArray(item.uid, selectedUids) !== -1) {
        grid.clearSelection(row);
    } else {
        grid.select(row);
    }
});

注意事项 #

• 确保代码在Grid初始化完成后执行，比如绑定到按钮点击事件，或者Grid的dataBound回调中
• 如果Grid启用了分页，上述方法仅处理当前页的行。若要操作所有页数据，需先遍历所有分页获取数据，完成操作后再刷新Grid的选中状态

内容的提问来源于stack exchange，提问作者mortenma71