我已经为 kendo-ui 表格添加了 onchange 事件。
在此，我正在尝试获取该特定行的 ID 值。我已将图像列添加为 grid 中的第一列。我的要求是当单击该图像时，我想要打开图像 URL。
所以，基本上我想要的是，当我点击行时，我想要获取所点击的行索引，同时我也想要获取该行中所点击单元格的索引。
因此，根据所点击的行并且如果不是点击的第一个单元格，我想要显示警告。如果点击的是第一个单元格，我想要打开图像。
我该如何获得这个索引。
我已在 kendo-ui 表格中设置了 selectable:row
请帮助我解决这个问题。
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>
如果您只需要知道表格中的行和列索引，您可以执行以下操作：
$(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);
console.log("row:", rowIdx, "cell:", colIdx);
});
click 事件处理程序。closest 方法找到该单元格所属的行（<tr>）。index 方法查找该行在表格中的索引。但也许有更简单的方法，例如检测用户是否点击了图像，或者在图像中设置一些 CSS 类，然后检查点击的单元格是否具有该类等...
编辑 如果您还想在 click 处理程序中获取原始 item，请添加：
var item = grid.dataItem(row);
从那里开始，您可以获取id或任何其他字段进行验证。
click事件。如果想从click处理程序内部了解行的ID，请参见上面的EDIT。 - OnaBai$(this).closest("tr")中获取到了。只调用index()不就可以了吗？ - LucianKendo自引入了冻结列功能，因此我认为需要对这个功能进行一些更新。
当你有一个冻结的列时，网格将创建新的标题/内容表来管理冻结的列。如果你冻结了一列，它将把与该列相关联的项目从常规网格的tbody / thead移动到lockedContent / lockedHeader（反之亦然）。
如果你使用已接受的答案来获取索引，你将得到tbody中单元格的索引（如果单元格被冻结，则返回-1）。真正的问题是你想用列索引做什么？如果你真的想要一个索引号，你可能需要根据你的需求通过添加锁定内容中的列数来调整该值。但是，如果你最终的目标是获取网格的列对象，可以使用th元素来实现：
var row = cell.closest("tr");
var body;
var header;
if (cell.closest(grid.lockedContent).length) {
body = grid.lockedContent;
header = grid.lockedContent;
} else {
body = grid.tbody;
header = grid.thead;
}
var rowIndex = $("tr", body).index(row);
var columnIndex = $("td", row).index(cell);
var columnField = header.find("th").eq(columnIndex).attr("data-field");
var column;
$.each(grid.columns, function () {
if (this.field === columnField) {
column = this;
return false;
}
});
免责声明: 仅供参考，需要考虑到kendo还引入了多列标题的功能，这可能会使我上面的代码失效。
对于单元格索引，Kendo Grid 有一个方法 cellIndex(cell)。
var cell = $("#grid td:eq(1)");
console.log(grid.cellIndex(cell));
var rowIdx = $("tr", grid.tbody).index(row);？直接在行上调用index()，像这样：var rowIdx = row.index()不就足够了吗？ - Lucian