使用 angularjs 显示从 kendo-grid 到 html 的数据

Question

我正在研究 this。它使用 kendo - 网格显示数据。但是，我需要的是当我单击 table 中的特定行时，它的所有内容都被提取到一个对象中并使用该对象我可以在 table 下方显示它的字段。我怎样才能做到这一点？另外，我相信如果我们使用对象来显示字段，我们也需要修改这段代码。任何帮助，将不胜感激。

First Name: {{FirstName}}<br>
Last Name: {{LastName}}<br>
Country: {{Country}}<br>
City: {{City}}<br>

Answer 1

您似乎需要侦听行选择（更改事件），并获取选定的行，然后将其绑定到范围内的 angular 变量，如 update[=12 中所述=]

这里的关键是selection/deselection

触发的change事件

grid configs
...
change: function(e) {
    var selection = this.select(),
        selectedItem
    ;

    if(selection && this.dataItem(selection)) {
        $scope.selectedItem = this.dataItem(selection).toJSON();
    } else {
        $scope.selectedItem = {};
    }

    $scope.$apply();
}
...
grid configs

Answer 2

您的代码需要进行两处更改：

1) 在HTML中添加on-change事件处理函数<kendo-grid options="mainGridOptions" k-on-change="handleChangeEvent(data, dataItem, columns)"> </kendo-grid>

2) 在 JavaScript

将 Kendo 网格设置为可选 sortable: true
定义$scope.handleChangeEvent函数

代码： HTML:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css" />

  <script src="http://cdn.kendostatic.com/2014.3.1411/js/jquery.min.js"></script>
  <script src="http://cdn.kendostatic.com/2014.3.1411/js/angular.min.js"></script>
  <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
  <script src="script.js"></script>

</head>

<body>
  <div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">
      <kendo-grid options="mainGridOptions" k-on-change="handleChangeEvent(data, dataItem, columns)">  </kendo-grid>

      <h5>You selected: </h5>
First Name: {{FirstName}}<br>
Last Name: {{LastName}}<br>
Country: {{Country}}<br>
City: {{City}}<br>
    </div>
  </div>
</body>
</html>

和JavaScript：

 angular.module("KendoDemos", ["kendo.directives"])
       .controller("MyCtrl", function ($scope) {

           $scope.handleChangeEvent = function(data, dataItem, columns) {

         $scope.FirstName=dataItem.FirstName;
         $scope.LastName=dataItem.LastName;
         $scope.Country=dataItem.Country;
         $scope.City = dataItem.City;

      };

           $scope.mainGridOptions = {
               dataSource: {
                   type: "odata",
                   transport: {
                       read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                   },
                   pageSize: 5,
                   serverPaging: true,
                   serverSorting: true
               },
               selectable: "row",
               sortable: true,
               pageable: true,
               dataBound: function () {
                   this.expandRow(this.tbody.find("tr.k-master-row").first());
               },
               columns: [{
                   field: "FirstName",
                   title: "First Name",
                   width: "120px"
               }, {
                   field: "LastName",
                   title: "Last Name",
                   width: "120px"
               }, {
                   field: "Country",
                   width: "120px"
               }, {
                   field: "City",
                   width: "120px"
               }, {
                   field: "Title"
               }]
           };
       });

使用 angularjs 显示从 kendo-grid 到 html 的数据

Display the data from kendo-grid to html using angularjs

kendo-ui

angularjs

kendo-grid