Angular5中KendoGrid无需复选框与Ctrl键的多行选择方法

嘿，我之前刚好在Angular 5项目里用Kendo UI实现过这个需求——不用Ctrl键也不用复选框，直接点击行就能切换选中状态（点一下选中，再点一下取消）。给你分享下具体的实现思路和代码，亲测可行！

核心思路 #

我们要绕过Kendo Grid默认的多选逻辑（默认多选需要配合Ctrl键），通过手动监听行点击事件来维护选中项集合，同时自定义行的选中样式，让用户操作起来更直观。

具体实现步骤 #

1. 配置Grid模板

首先，关闭Grid默认的选择功能和复选框列，绑定行点击事件，同时用ngClass动态控制行的选中样式：

<kendo-grid
  [data]="yourGridData"
  [selectable]="false" <!-- 禁用默认选择逻辑 -->
  (rowClick)="handleRowClick($event)"
>
  <!-- 你的列配置 -->
  <kendo-grid-column field="id" title="ID"></kendo-grid-column>
  <kendo-grid-column field="productName" title="Product Name"></kendo-grid-column>
  
  <!-- 自定义行模板，用来添加选中样式 -->
  <ng-template kendoGridRowTemplate let-dataItem>
    <tr [ngClass]="{'k-state-selected': isRowChecked(dataItem)}">
      <td>{{dataItem.id}}</td>
      <td>{{dataItem.productName}}</td>
      <!-- 对应其他列内容 -->
    </tr>
  </ng-template>
</kendo-grid>

2. 组件类逻辑处理

在组件里定义选中项数组，实现行点击的处理函数和判断行是否选中的方法：

import { Component } from '@angular/core';
import { RowClickEvent } from '@progress/kendo-angular-grid';

@Component({
  selector: 'app-custom-grid',
  templateUrl: './custom-grid.component.html',
  styleUrls: ['./custom-grid.component.css']
})
export class CustomGridComponent {
  // 你的Grid数据源
  public yourGridData = [
    { id: 1, productName: 'Laptop' },
    { id: 2, productName: 'Phone' },
    { id: 3, productName: 'Tablet' }
    // 更多数据...
  ];
  
  // 存储选中的行数据
  public selectedRows: any[] = [];

  // 判断当前行是否已选中
  isRowChecked(dataItem: any): boolean {
    // 用唯一标识（比如id）来匹配，避免数据重复导致判断错误
    return this.selectedRows.some(item => item.id === dataItem.id);
  }

  // 行点击事件处理
  handleRowClick(event: RowClickEvent): void {
    const clickedItem = event.dataItem;
    const existingIndex = this.selectedRows.findIndex(item => item.id === clickedItem.id);
    
    if (existingIndex > -1) {
      // 已选中，从集合中移除
      this.selectedRows.splice(existingIndex, 1);
    } else {
      // 未选中，添加到集合
      this.selectedRows.push(clickedItem);
    }
  }
}

3. 自定义选中样式（可选）

如果默认的k-state-selected样式不符合你的UI需求，可以自定义样式：

/* 自定义选中行的背景色和文字颜色 */
.k-grid tr.k-state-selected {
  background-color: #f0f5ff;
  color: #2563eb;
}

/* 鼠标悬停样式保持一致 */
.k-grid tr:hover {
  background-color: #f9fafb;
}

额外注意点 #

• 确保你的数据源有唯一标识字段（比如id），这样才能准确判断行的选中状态，避免数据重复时出错。
• 如果Grid有分页功能，记得维护跨分页的选中状态——可以单独存储选中项的ID，切换分页后再匹配当前页的数据，重新标记选中状态。

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