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

时间:2013-10-02 06:51:27

标签: c# jquery asp.net asp.net-mvc asp.net-mvc-4

我想创建一个数据表,只要在单元格/行上有鼠标悬停事件,我就可以弹出一个上下文菜单/按钮,用于与单元格中的数据相关的操作。

示例:如果我在a列中有用户名,则只要用户将鼠标移到该单元格上,它就会显示“Detail”,“Update”和“Remove”按钮。如果我有一个地址列,每当用户将鼠标移到该地址单元格上时,我会弹出一个说...谷歌地图或其他东西。

我将使用带有Ext.NET或JQuery的ASP.NET MVC 4来实现它。这两个例子都是受欢迎的。谢谢!

注意:不需要详细的代码,但欢迎使用代码段。

1 个答案:

答案 0 :(得分:0)

首先,我不认为从可用性的角度来看,在悬停时显示动作按钮并不是一个好主意 - 因为你需要盘旋以发现有动作 - 有些人可能会查看表并且没有想知道接下来要做什么,只是意外地发现实际上隐藏了一些按钮。

我会考虑使用现有网格之一 - 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)使其可重复使用:)