Как создать Data Data Data Grid с помощью ASP.NET MVC

Question

Я хотел бы создать таблицу данных, которая всякий раз, когда есть событие мыши на ячейке/строке, я смогу всплывать контекстное меню/кнопки для действий, которые имеют отношение к данным в ячейке.

Пример: Если у меня есть имя пользователя в столбце, всякий раз, когда пользователь перемещает указатель мыши по этой ячейке, он отображает кнопки «Детализация», «Обновить» и «Удалить». Если у меня есть столбец адресов, всякий раз, когда пользователь перемещает мышь над этой ячейкой адреса, я вывожу подсказку ... карту google или что-то еще.

Я собираюсь реализовать это с помощью ASP.NET MVC 4 с Ext.NET или JQuery. Любые примеры приветствуются. Благодаря!

ПРИМЕЧАНИЕ. Не требуется подробный код, но фрагменты приветствуются.

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) сделать ее многоразовой :)