AngularJS中不使用jQuery获取Kendo Grid选中行数据的方法

嘿，我来帮你搞定这个问题！在AngularJS环境下用Kendo Grid，完全不用依赖jQuery就能拿到选中行的数据，咱们用Kendo官方的Angular集成方式来实现，靠谱又简单：

方法一：通过k-on-change事件直接获取 #

Kendo Grid的Angular指令自带了k-on-change事件，选中行变化时会自动把选中的数据（单选是单个对象，多选是数组）传递给你定义的回调函数，直接用就行：

步骤： #

1. 在Grid标签里添加k-selectable="row"开启行选择功能，再加上k-on-change="handleGridSelection(data)"绑定事件处理函数
2. 在Angular控制器里定义handleGridSelection函数，参数就是选中的行数据

示例代码：

<!-- HTML部分 -->
<div ng-app="gridApp" ng-controller="GridController">
  <div kendo-grid
       k-data-source="gridData"
       k-selectable="row"
       k-on-change="handleGridSelection(data)"
       k-columns='[
         { field: "productId", title: "ID" },
         { field: "productName", title: "商品名称" },
         { field: "price", title: "价格" }
       ]'>
  </div>
  <p>选中的数据：{{selectedData | json}}</p>
</div>

// 控制器部分
angular.module("gridApp", ["kendo.directives"])
.controller("GridController", function($scope) {
  $scope.gridData = [
    { productId: 1, productName: "笔记本电脑", price: 5999 },
    { productId: 2, productName: "无线鼠标", price: 99 },
    { productId: 3, productName: "机械键盘", price: 299 }
  ];

  $scope.handleGridSelection = function(selectedItems) {
    // 单选时selectedItems是单个对象，多选时是数组
    $scope.selectedData = selectedItems;
    console.log("当前选中行数据：", selectedItems);
  };
});

方法二：通过Grid实例主动获取 #

如果需要在特定时机（比如点击按钮）获取选中行，可以把Grid实例绑定到Angular作用域，然后调用实例的方法来获取：

步骤： #

1. 在Grid标签里添加k-scope-field="myGrid"，这样Grid实例就会被挂载到$scope.myGrid上
2. 调用$scope.myGrid.select()获取选中的行DOM元素（不用jQuery，直接用Kendo本身的方法）
3. 再调用$scope.myGrid.dataItem(selectedRow)把DOM元素转换成对应的数据对象

示例代码：

<!-- HTML部分 -->
<div ng-app="gridApp" ng-controller="GridController">
  <div kendo-grid
       k-data-source="gridData"
       k-selectable="row"
       k-scope-field="myGrid"
       k-columns='[
         { field: "productId", title: "ID" },
         { field: "productName", title: "商品名称" },
         { field: "price", title: "价格" }
       ]'>
  </div>
  <button ng-click="getSelectedRow()">点击获取选中行</button>
  <p>选中的数据：{{selectedData | json}}</p>
</div>

// 控制器部分
angular.module("gridApp", ["kendo.directives"])
.controller("GridController", function($scope) {
  $scope.gridData = [
    { productId: 1, productName: "笔记本电脑", price: 5999 },
    { productId: 2, productName: "无线鼠标", price: 99 },
    { productId: 3, productName: "机械键盘", price: 299 }
  ];

  $scope.getSelectedRow = function() {
    var selectedRow = $scope.myGrid.select();
    if (selectedRow.length > 0) {
      // 把选中的行DOM转换成数据对象
      $scope.selectedData = $scope.myGrid.dataItem(selectedRow);
      console.log("选中行数据：", $scope.selectedData);
    } else {
      alert("请先选中一行！");
    }
  };
});

关键说明 #

这两种方法都完全不需要jQuery，因为Kendo的AngularJS指令已经帮我们把Grid的实例和数据都集成到Angular的作用域体系里了，所有操作都通过Angular的方式完成，既符合Angular的设计思想，又避免了对jQuery的依赖。

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