首页 文章

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

提问于
浏览 次
4

有人可以帮助我以角度编程方式选择一个剑道网格行 . 我可以按行号选择一行 . 我无法找到一种方法来根据列的内容选择一行 .

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>

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]));
  };


});

此外，当以编程方式选择行时，我的网格更改事件中出现错误 . 手动选择行时，它工作正常 .

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

angularjs kendo-grid

4 回答

  • 2

    你应该把你的“tr” Build 在id / uid上 . 如果你检查元素，它会告诉你在该表行中有什么属性 .

    dataBound:function(e) { 
                  var grid = e.sender;
                  var data = grid._data; //this is your array of data. make sure you check what's in your object array. log it to see.

                  data.forEach(function(entry) { 
                     if($scope.name === entry.name){ 
                        grid.select('tr[data-uid="' + entry.uid + '"]');  
                     }  
                  })
                },
    回复于
  • 3

    将您的dataBound更改为此，这将搜索该搜索词的整行：

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

    或者仅基于单个列进行搜索，请执行以下操作：

    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);
      }                          
    });
  }

    至于你的控制台错误，在索引页面的网格上添加 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);
};

    您收到控制台错误，因为网格没有附加到数据绑定功能中的select命令上的$ scope，导致网格引用为null . 我不太了解angular JS，但我通过分配网格和ID然后从该ID选择器获取网格，在上面做了一个hack解决方案 .

    回复于
  • 0

    同样的问题：调用 $scope.myGrid.select(someRow) 不起作用 . 代码不会抛出异常，但它只是忽略了调用 .

    为了使它工作，我把它放在一个setTimeout：

    setTimeout(function () {
  $scope.grid.select(someRow);
});

    它不优雅，但它没有太多的LoC . 我希望Telerik将在未来的版本中解决这个问题 .

    回复于
  • 1

    程序员

    使用你可能无法实现的剑道版本 . 使用最新版本，您可以这样做：

    “改进myGridChange（）”：

    1.改变

    k-on-change="myGridChange()"

    至

    k-on-change="myGridChange( dataItem )"

    2.改变

    $scope.myGridChange = function(){
  // some code
}

    至

    $scope.myGridChange = function( dataItem ){
  // dataItem will contain the row that was selected
}

    基本上，您应该将所选行保存在模型/控制器中的某个位置 .

    以编程方式选择一行

    $scope.myGrid.select(); // this will not work.

    这是将Kendo代码与AngularJs混合使用 . 有时我们必须这样做，但让我们尽可能地避免它 .

    快速回答是没有办法做到这一点 . 你要做的是：

    • 将CSS样式添加到行 .

    • 修改模型以记住以编程方式选择的行 .

    我的网页上的答案很长here . 是的，我经历了你所做的同样的痛苦 .

    回复于

相关问题