,可以通过以下步骤实现:
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.511/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.511/styles/kendo.default.min.css">
<script src="https://kendo.cdn.telerik.com/2022.1.511/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.511/js/kendo.all.min.js"></script>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
dataSource: {
data: [
{ id: 1, name: "John" },
{ id: 2, name: "Jane" },
{ id: 3, name: "Bob" }
],
schema: {
model: {
fields: {
id: { type: "number" },
name: { type: "string" }
}
}
}
},
columns: [
{ field: "id", title: "ID" },
{ field: "name", title: "Name" }
]
});
</script>
<script>
$("#grid").kendoGrid({
// ... 省略其他配置 ...
selectable: "row",
change: function(e) {
var selectedRow = this.select(); // 获取选中行的DOM元素
var dataItem = this.dataItem(selectedRow); // 获取选中行的数据项
var rowId = dataItem.id; // 获取行ID
console.log("Selected Row ID: " + rowId);
}
});
</script>
在上述代码中,通过配置kendo网格的selectable属性为"row",使得用户可以选择网格中的行。然后,在change事件中,通过this.select()获取选中行的DOM元素,再通过this.dataItem(selectedRow)获取选中行的数据项,最后通过dataItem.id获取行ID。可以将行ID用于后续的业务逻辑处理。
需要注意的是,以上示例中的数据源仅用于演示,实际应用中需要根据具体需求使用合适的数据源。另外,kendo UI框架提供了丰富的功能和组件,可以根据实际需求进行扩展和定制。详细的文档和示例可以参考腾讯云的Kendo UI产品介绍页面:Kendo UI。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云