在Kendo网格AngularJS中以编程方式选择一行

You*_*mer 5 angularjs kendo-grid

有人可以帮助我以编程方式选择角度的剑道网格行。我可以逐行选择一个行。我无法找出一种方法来选择基于一行的内容(如果其列的内容)。

HTML:

 <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <div kendo-grid="myGrid" k-options="myOptions"  k-selectable="'row'" k-on-change="myGridChange()"></div> 
  </body>
Run Code Online (Sandbox Code Playgroud)

JS:

var app = angular.module('plunker', ['kendo.directives']);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.myOptions = {
    columns:[
      {
        field: 'ID'
      },
      {
        field: 'FirstName'
      },
      {
        field: 'LastName'
      },
      ],
      dataSource: [
            {ID:139, FirstName:'John', LastName:'Doe'},
            {ID:250, FirstName:'Jane', LastName:'Smith'},
            {ID:376, FirstName:'Henry', LastName:'Rocks'}
            ],
      dataBound:function(e) {
              var grid = e.sender;
              grid.select("tr:eq(2)");
              grid.select("tr[FirstName='Henry'])");  // This doesn't work
      }
  };

  $scope.myGridChange = function(){
     var selectedRows = $scope.myGrid.select();             // This doesn't work
     console.log($scope.myGrid.dataItem(selectedRows[0]));
  };


});
Run Code Online (Sandbox Code Playgroud)

另外,以编程方式选择一行时,我的网格更改事件出现错误。手动选择行时,它可以正常工作。

这是我的朋克 http://plnkr.co/edit/PpDuSR10xNOxOVirDpfN?p=preview

git*_*tgo 3

将您的 dataBound 更改为此,这会在整行中搜索该搜索词:

  dataBound:function(e) {
        var searchTerm = "Henry";
        var grid = e.sender;  
        grid.select("tr:contains('" + searchTerm + "')");
  }
Run Code Online (Sandbox Code Playgroud)

或者要仅基于单个列进行搜索,请执行以下操作:

  dataBound:function(e) {
    var grid = e.sender;
    $.each(grid.tbody.find('tr'),function(){
      var model = grid.dataItem(this);
      if(model.FirstName=="Henry"){
        grid.select(this);
      }                          
    });
  }
Run Code Online (Sandbox Code Playgroud)

至于控制台错误,请添加id="grid"到索引页面上的网格中,并将 myGridChange 替换为:

$scope.myGridChange = function(){
    var grid = $scope.myGrid;
    if(!grid)
      grid = $("#grid").data("kendoGrid");
    var selectedRows = grid.select(); 
    var data = grid.dataItem(selectedRows[0]);
    console.log("The name is " + data.FirstName + ", "+ data.FirstName + " " + data.LastName);
};
Run Code Online (Sandbox Code Playgroud)

您收到控制台错误是因为网格未附加到数据绑定函数中 select 命令上的 $scope,导致网格引用为空。我对 Angular JS 不太了解,但我在上面做了一个 hack 解决方案,方法是分配网格和 ID,然后从该 ID 选择器获取网格。