如何使用ASP.NET MVC創建數據感知型數據網格

Question

我想創建一個數據表，當單元格/行出現鼠標懸停事件時，我將能夠彈出一個上下文菜單/按鈕用於與單元格中的數據相關的操作。

示例：如果我在一列中有用戶名，每當用戶將鼠標移動到該單元格上時，它將顯示「詳細信息」，「更新」和「刪除」按鈕。如果我有地址欄，每當用戶將鼠標移動到該地址單元上時，我將彈出一個說...谷歌地圖或其他東西。

我將使用帶有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）使其可重複使用:)