剑道网格-如何在RowSelected上获取行详细信息
Kendo grid - How to get the row details on RowSelected?
作为剑道网格升级的一部分,由于实现的变化,我的一些旧代码似乎无法工作
我使用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。现在正确的使用方法是什么?使用events.Change
行选择的功能正确的方式这样做?
这里是关于如何获取所选行详细信息的参考。单击行以获取其详细信息。
var gview = $("#grid").data("kendoGrid");
//Getting selected item
var selectedItem = gview.dataItem(gview.select());
alert(selectedItem.ShipName);
示例-在使用行选择
时获取选中的数据项同样的,你也可以使用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>
我必须使用事件。更改为触发行单击事件
@(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变量包含了您需要的所有详细信息。
对于使用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'
function onRowSelected(e) {
var gview = $("#grid").data("kendoGrid");
//Getting selected item
var selectedItem = gview.dataItem(gview.select());
var colValue = selectedItem["<columnName>"];
}
相关文章:
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- jquery试图按名称获取按钮位置
- 如何在jQuery中获取元素的形式
- 如何在php文件中获取$.post-ajax传递的值
- 在Shopify中获取博客文章的图片
- 使用Javascript获取所选选项ID
- 在jQuery中获取表的行索引
- 使用jquery将mysql数据获取到新的表行中
- 在动态创建的元素上获取对特定选择器的引用
- 从城市名称获取惊喜
- Angular只从数组中获取所需的数据
- 无法将数据从firebase获取到我的html页面
- 从ajax请求中获取javascript对象
- 如何从画布上的某个移动事件中获取X和Y
- 是否有一个JS/jQuery函数可以获取某个类的每个元素的ID
- 如何在PHP中使用$_POST获取Select元素值
- 获取@ResponseBody的一部分作为主干和Spring MVC控制器之间的参数
- 从Rally获取一个特定的标记,以便计算另一个字段中的值
- Twitter Bootstrap typeahead:使用“this”获取上下文/调用元素
- 剑道网格-如何在RowSelected上获取行详细信息