单击用于 MVC 的 kendo ui 网格中的单元格时需要行索引和列标题
Posted
技术标签:
【中文标题】单击用于 MVC 的 kendo ui 网格中的单元格时需要行索引和列标题【英文标题】：Need row index and column header on click of a cell in kendo ui grid for MVC 【发布时间】：2016-12-08 21:41:22 【问题描述】：正如标题所示，我在 MVC 应用程序的视图中使用 Kendo UI Grid。
现在，在单击特定单元格时，我需要将行索引和列标题（该单元格所属的）传递给应用程序的 .cs 文件中编写的函数。
感谢任何帮助。
谢谢:)
P.S.：如果您认为我没有提供足够的信息，请告诉我，因为我是一个新手程序员！
【问题讨论】：
您提供的信息已经足够，但您没有分享您尝试过的信息。 谢谢你的回复，Jayesh，但那是我不知道从哪里开始的事情。我将尝试理解您的代码并尝试以我希望实现的方式实现它。如果我有任何问题，我会在这里发帖。可以吗？ 【参考方案1】：您可以通过使用 ondatabound 事件来实现这一点，请查看以下代码 sn-p。
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 colname = grid.columns[$("td", row).index(this)].title;
alert('row index is :- ' + rowIdx + ' and column name is:- ' + colname);
);
完整代码：-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function ()
var products = [
ProductID: 1,
ProductName: "Chai",
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: "10 boxes x 20 bags",
UnitPrice: 18.0000,
UnitsInStock: 39,
UnitsOnOrder: 0,
ReorderLevel: 10,
Discontinued: false,
Category:
CategoryID: 1,
CategoryName: "Beverages",
Description: "Soft drinks, coffees, teas, beers, and ales"
,
ProductID: 2,
ProductName: "Chang",
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: "24 - 12 oz bottles",
UnitPrice: 19.0000,
UnitsInStock: 17,
UnitsOnOrder: 40,
ReorderLevel: 25,
Discontinued: false,
Category:
CategoryID: 1,
CategoryName: "Beverages",
Description: "Soft drinks, coffees, teas, beers, and ales"
,
ProductID: 3,
ProductName: "Aniseed Syrup",
SupplierID: 1,
CategoryID: 2,
QuantityPerUnit: "12 - 550 ml bottles",
UnitPrice: 10.0000,
UnitsInStock: 13,
UnitsOnOrder: 70,
ReorderLevel: 25,
Discontinued: false,
Category:
CategoryID: 2,
CategoryName: "Condiments",
Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
,
ProductID: 4,
ProductName: "Chef Anton's Cajun Seasoning",
SupplierID: 2,
CategoryID: 2,
QuantityPerUnit: "48 - 6 oz jars",
UnitPrice: 22.0000,
UnitsInStock: 53,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false,
Category:
CategoryID: 2,
CategoryName: "Condiments",
Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
,
ProductID: 5,
ProductName: "Chef Anton's Gumbo Mix",
SupplierID: 2,
CategoryID: 2,
QuantityPerUnit: "36 boxes",
UnitPrice: 21.3500,
UnitsInStock: 0,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: true,
Category:
CategoryID: 2,
CategoryName: "Condiments",
Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
];
$("#grid").kendoGrid(
dataSource:
data: products,
schema:
model:
id: "ProductID",
fields:
ProductID: type: 'number' ,
UnitsInStock: type: 'number' ,
ProductName: type: 'string' ,
QuantityPerUnit: type: 'string' ,
UnitPrice: type: 'number' ,
,
,
dataBound: onDataBound,
columns: [
field: "ProductName", title: "ProductName" ,
field: "UnitsInStock", title: "UnitsInStock" ,
field: "QuantityPerUnit", title: "QuantityPerUnit" ,
field: "UnitPrice", title: "UnitPrice" ,
]
);
);
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 colname = grid.columns[$("td", row).index(this)].title;
alert('row index is :- ' + rowIdx + ' and column name is:- ' + colname);
);
</script>
</body>
</html>
如果有任何问题，请告诉我。
【讨论】：
以上是关于单击用于 MVC 的 kendo ui 网格中的单元格时需要行索引和列标题的主要内容，如果未能解决你的问题，请参考以下文章
如何在 MVC 应用程序中转置 Kendo UI 网格中的行和列？
MVC 中的 KENDO UI 网格：有没有办法在某些列上隐藏过滤器？