如何使用ASP.NET MVC创建数据感知数据网格

Question

我想创建一个数据表，每当单元格/行上发生鼠标悬停事件时，我都将能够弹出上下文菜单/按钮，以执行与单元格中的数据相关的操作。

示例：如果我在a列中有一个用户名，则每当用户将鼠标移到该单元格上时，它将显示按钮“详细信息”，“更新”和“删除”。 如果我有一个地址栏，则每当用户将鼠标移到该地址单元格上时，我都会弹出一个说...谷歌地图或其他内容。

我将使用带有Ext.NET或JQuery的ASP.NET MVC 4来实现这一点。 无论哪种例子都值得欢迎。 谢谢！

注意：不需要详细的代码，但是欢迎使用摘要。

Answer 1

首先，从可用性的角度来看，在悬停上显示动作按钮并不是一个好主意-因为您需要悬停才能发现有动作-有些人可能会看着桌子，不知道该怎么做下一步，只是偶然发现实际上隐藏了一些按钮。

我会考虑使用现有的网格之一-Telerik的mvc网格很棒-特别是因为它们具有良好的客户端API-尽管可以花钱，但您可以使用它来实现所需的功能-但确实值得一试- http://demos.kendoui.com/web/grid/index.html 。

另外还有Grid.Mvc-尽管客户端API较弱，但它是开源的并且可用： http ://gridmvc.codeplex.com/wikipage?title=Client%20side%20%28javascript%29&referringTitle=Documentation

要实现所需的功能，您需要将其拆分为以下任务：

1）检测悬停事件，为此，您可以使用jQuery- http://api.jquery.com/hover/
2）检测您所在的列，可能会在表头上为此使用一些数据属性，您可以使用jQuery这样找到列头：

var $th = $td.closest('tbody').prev('thead').find('> tr > th:eq(' + $td.index() + ')');

3）根据您所在的列切换逻辑
4）使其可重用：）