如何实现Kendo Grid单选按钮互斥并获取选中项？

嘿，我来帮你搞定这个需求！要让Kendo Grid里的单选按钮实现互斥（同一时间只能选一个），还能轻松获取选中的那一项，咱们可以按下面的步骤来操作：

1. 给Grid配置单选按钮列 #

首先在Grid的列定义里加一个模板列，用来渲染单选按钮。关键是给所有单选按钮设置相同的name属性——这是利用HTML单选按钮的原生特性，同一name下的按钮天然互斥，省得自己写复杂的互斥逻辑。另外，把每行数据的唯一标识（比如ID）绑定到单选按钮的value上，后面拿数据会很方便：

columns: [
  {
    template: '<input type="radio" name="gridSelection" value="#= Id #" />',
    title: '选择',
    width: 80
  },
  // 你的其他列，比如：
  { field: 'ProductName', title: '产品名称' },
  { field: 'Price', title: '价格' }
]

2. 监听单选按钮点击，获取选中项 #

接下来我们可以借助Grid的dataBound事件，在数据加载完成后给单选按钮绑定点击事件（用事件委托更高效，不用给每个按钮单独绑），点击时就能拿到选中的行数据：

$("#yourGridId").kendoGrid({
  dataSource: yourDataSource, // 替换成你的数据源
  columns: [/* 上面的列定义 */],
  dataBound: function() {
    // 用事件委托监听单选按钮点击
    this.table.on("click", "input[name='gridSelection']", function() {
      var selectedId = $(this).val();
      // 通过ID从数据源里拿到完整的行数据
      var grid = $("#yourGridId").data("kendoGrid");
      var selectedItem = grid.dataSource.get(selectedId);
      
      // 这里就可以处理选中项了，比如打印或者传给后端
      console.log("当前选中的行数据：", selectedItem);
    });
  }
});

3. 可选优化：默认选中某一行 #

如果需要页面加载完成后自动选中某一行（比如第一行），可以在dataBound事件里加这段逻辑：

dataBound: function() {
  var grid = this;
  // 获取第一行数据
  var firstRow = grid.dataSource.view()[0];
  if (firstRow) {
    // 找到对应单选按钮并设为选中
    grid.table.find(`input[name='gridSelection'][value='${firstRow.Id}']`).prop("checked", true);
  }
  
  // 上面的点击监听逻辑...
}

为啥这么做？ #

• 原生HTML单选按钮的name属性互斥特性，比自己写JS遍历取消选中要靠谱且高效。
• 绑定行ID到value，直接用dataSource.get()就能拿到完整数据，不用去DOM里扒其他列的内容，代码更简洁维护性也高。

这样就能完美实现你要的效果啦！

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