Kendo 网格 - 如何获取 RowSelected 上的行详细信息？

Posted 2023-05-07

【中文标题】Kendo 网格 - 如何获取 RowSelected 上的行详细信息？

【英文标题】：Kendo grid - How to get the row details on RowSelected?

【发布时间】：2014-06-26 21:55:45

【问题描述】：

作为剑道网格升级的一部分，我的一些旧代码似乎由于实现的变化而无法工作

我使用events.Change触发了一行点击事件（示例代码如下）

@(html.Kendo().Grid(Model.BankSearchList).Name("Grid")
                                .Events(events =>
                                
                                    events.Change("onRowSelected");
                                    events.DataBound("onGrindBound");
                                )

在我的 onRowSelected(e) 方法中，我正在使用

访问键列成员

e.row.cells[0].innerHTML

e.row 现在未定义。 现在正确的使用方法是什么？ 将events.Change 用于行选择功能是否正确？

【参考方案1】：

这里是有关如何获取选定行详细信息jsfiddle 的参考。单击行以获取其详细信息。

var gview = $("#grid").data("kendoGrid");
//Getting selected item
var selectedItem = gview.dataItem(gview.select());
alert(selectedItem.ShipName);

【讨论】：

谢谢，我假设让网格 .Selectable() 强制执行此操作？

【参考方案2】：

示例 - 使用行选择时获取选定的数据项

您也可以使用 html 帮助程序来执行相同的操作。 onchange 事件。

<div id="grid"></div>
<script>
$("#grid").kendoGrid(
  columns: [
     field: "name" ,
     field: "age" 
  ],
  dataSource: [
     name: "Jane Doe", age: 30 ,
     name: "John Doe", age: 33 
  ],
  selectable: "multiple, row",
  change: function(e) 
    var selectedRows = this.select();
    var selectedDataItems = [];
    for (var i = 0; i < selectedRows.length; i++) 
      var dataItem = this.dataItem(selectedRows[i]);
      selectedDataItems.push(dataItem);
    
    // selectedDataItems contains all selected data items
  
);
</script>

示例 - 使用单元格选择时获取选定的数据项

<div id="grid"></div>
<script>
function grid_change(e) 
  var selectedCells = this.select();
  var selectedDataItems = [];
  for (var i = 0; i < selectedCells.length; i++) 
    var dataItem = this.dataItem(selectedCells[i].parentNode);
    if ($.inArray(dataItem, selectedDataItems) < 0) 
      selectedDataItems.push(dataItem);
    
  
  // selectedDataItems contains all selected data items



$("#grid").kendoGrid(
  columns: [
     field: "name" ,
     field: "age" 
  ],
  dataSource: [
     name: "Jane Doe", age: 30 ,
     name: "John Doe", age: 33 
  ],
  selectable: "multiple, cell"
);
var grid = $("#grid").data("kendoGrid");
grid.bind("change", grid_change);
</script>

【参考方案3】：

我必须使用 events.change 来触发行点击事件

@(Html.Kendo().Grid(Model.BankSearchList).Name("Grid")
                            .Events(events =>
                            
                                events.Change("onRowSelected");
                            )

然后将onRowSelected函数处理为：

  <script> 
 var selectedRow = null;
    //onRowSelected
    function onRowSelected(e)
    
        var row = this.select();
        if (row.length > 0 )
        
            selectedRow = e.sender.select();
            var item = e.sender.dataItem(selectedRow);
        
    
</script>

所以，item 变量包含您需要的所有详细信息。

【参考方案4】：

对于那些使用 AngularJS 的人：

$scope.gridOptions = 
    dataSource: gridDataSource,
    columns: [
         field: 'name' ,
         field: 'phone' 
    ],
    selectable: 'row',
    change: function () 
        var selectedRows = this.select();
        var rowData = this.dataItem(selectedRows[0]);
        console.log(rowData.name + ' ' + rowData.phone);
    ;
;

确保在网格选项中有selectable: 'row' 或selectable: 'multiple, row'。

【参考方案5】：

function onRowSelected(e) 
    var gview = $("#grid").data("kendoGrid");
    //Getting selected item
    var selectedItem = gview.dataItem(gview.select());
    var colValue = selectedItem["<columnName>"];

【讨论】：

请详细说明问题所在以及您是如何解决的。显示代码很好，解释更好