Kendo Grid 获取更改事件的行和列索引
Posted
技术标签:
【中文标题】Kendo Grid 获取更改事件的行和列索引【英文标题】：Kendo Grid get row and column index on Change event 【发布时间】：2015-12-29 02:16:01 【问题描述】：我有以下代码：
function grd_onChange(e)
var grid = $("#grd").data("kendoGrid");
var selectedCell = grid.select();
var index = selectedCell.index();
var row = selectedCell.closest("tr");
var col = selectedCell.closest("td");
alert(row);
我想知道当用户单击网格中特定行的单元格时如何获取列索引。
【问题讨论】：
【参考方案1】：请尝试以下代码 sn-p。
<body>
<script>
function onChange(arg)
var grid = $("#Grid").data("kendoGrid");
var row = this.select().closest("tr");
var rowIdx = $("tr", grid.tbody).index(row);
var colIdx = this.select().index();
alert(rowIdx + '-' + colIdx);
$(document).ready(function ()
$("#Grid").kendoGrid(
dataSource:
type: "odata",
transport:
read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
dataType: "jsonp"
,
schema:
model:
fields:
OrderID: type: "number" ,
Freight: type: "number" ,
ShipName: type: "string" ,
OrderDate: type: "date" ,
ShipCity: type: "string"
,
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
,
selectable: "multiple cell",
change: onChange,
filterable: true,
sortable: true,
pageable: true,
columns: [
field: "OrderID",
filterable: false
,
"Freight",
field: "OrderDate",
title: "Order Date",
width: 120,
format: "0:MM/dd/yyyy"
,
field: "ShipName",
title: "Ship Name",
width: 260
,
field: "ShipCity",
title: "Ship City",
width: 150
]
);
);
</script>
<div id="Grid"></div>
</body>
或
function onDataBound(e)
var grid = $("#Grid").data("kendoGrid");
$(grid.tbody).on("click", "td", function (e)
var row = $(this).closest("tr");
var rowIdx = $("tr", grid.tbody).index(row);
var colIdx = $("td", row).index(this);
alert(rowIdx + '-' + colIdx);
);
$(document).ready(function ()
$("#Grid").kendoGrid(
dataSource:
type: "odata",
transport:
read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
dataType: "jsonp"
,
schema:
model:
fields:
OrderID: type: "number" ,
Freight: type: "number" ,
ShipName: type: "string" ,
OrderDate: type: "date" ,
ShipCity: type: "string"
,
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
,
dataBound: onDataBound,
filterable: true,
sortable: true,
pageable: true,
columns: [
field: "OrderID",
filterable: false
,
"Freight",
field: "OrderDate",
title: "Order Date",
width: 120,
format: "0:MM/dd/yyyy"
,
field: "ShipName",
title: "Ship Name",
width: 260
,
field: "ShipCity",
title: "Ship City",
width: 150
]
);
);
<div id="Grid"></div>
如果有任何问题，请告诉我。
【讨论】：
感谢您的回复。但它还没有工作。如果我单击一行的单元格，它会显示 0-0、1-1 或 2-2。也许是因为我的前 3 列是包含复选框的模板列？ 我明白为什么它对我不起作用。您已设置为单元格选择而不是行选择。你如何使它适用于行选择？谢谢。 您确定要获取行部分而不是单元格部分的单元格索引。我还添加了另一种方法，可以帮助您在单击时获取单元格和行索引。 Databound 示例工作正常，但 onChange 始终显示 0-0,1-1，就像在 ist 评论中一样以上是关于Kendo Grid 获取更改事件的行和列索引的主要内容，如果未能解决你的问题，请参考以下文章