Статьи

ASP.NET MVC: использование контекстного меню jQuery с таблицами

Февраль 11, 2018

Мне нужно было добавить контекстные меню в некоторые таблицы моего приложения для внутренней сети. Попробовав несколько компонентов, я нашел тот, который делает все, что мне нужно, и не требует дополнительных затрат. В этой публикации я покажу вам, как использовать плагин контекстного меню jQuery и как прикрепить его к таблицам.

Я нашел плагин для контекстного меню Криса Домигана, и его было очень легко интегрировать в мое приложение (при сравнении некоторых других плагинов, которые работают только на демонстрационных страницах и в простых сценариях). Спасибо, Крис, за отличную работу! Теперь давайте использовать этот плагин контекстного меню с таблицей.

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

И когда мы нажимаем какую-то опцию меню, то тоже должно произойти. ?

Установка плагина контекстного меню

  1. Скачать плагин (если ссылка на скачивание не работает, откройте демонстрационную страницу, и я думаю, вы знаете, как получить плагин оттуда).
  2. Скопируйте jquery.contextmenu.js в вашу папку сценариев.
  3. Включите его в свою главную страницу или на страницу, где вы планируете использовать контекстные меню.
  4. Убедитесь, что плагин включен правильно (используйте Firebug или другой инструмент, который вам нравится).
  5. Сохраните страницу.

Определение контекстного меню

Теперь давайте определим контекстное меню. Вот фрагмент определения контекстного меню из моего кода. 

<div class="contextMenu" id="myMenu1">

    <ul>

    <li id="email"><img src="/img/e-mail.png" />E-mail</li>

    <li id="homepage"><img src="/img/homepage.png" />Homepage</li>

    </ul>

</div>

div с идентификатором myMenu1 является контейнером контекстного меню. Неупорядоченный список внутри контейнера определяет элементы в контекстном меню — просто и элегантно!

Добавление контекстного меню в таблицу

У меня есть стол с персонами. Это простой HTML. Я опустил столбец команд из этой и следующей таблицы, чтобы они были простыми и удобными для чтения.


<table>

  <tr>

    <th>Name</th>

    <th>Short</th>

    <th>Address</th>

    <th>Mobile</th>

    <th>E-mail</th>

  </tr>

  <% foreach(var person in Model.Results) { %>

  <tr>

    <td><%=person.FullName %></td>

    <td><%=person.ShortName %></td>

    <td><%=person.FullAddress %></td>

    <td><%=person.Mobile %></td>

    <td><%=person.Email %></td>

  </tr>

  <% } %>

</table>

Чтобы связать контекстное меню с первыми ячейками строк таблицы, нам нужно указать класс для ячеек и идентификатор. Нам нужен идентификатор, потому что позже мы должны знать, у какого идентификатора есть строка, в которой пользователь что-то выбрал из контекстного меню. 

<table>

  <tr>

    <th>Name</th>

    <th>Short</th>

    <th>Address</th>

    <th>Mobile</th>

    <th>E-mail</th>

  </tr>

  <% foreach(var person in Model.Results) { %>

  <tr>

    <td class="showContext" id="<%= person.Id %>"><%=person.FullName %></td>

    <td><%=person.ShortName %></td>

    <td><%=person.FullAddress %></td>

    <td><%=person.Mobile %></td>

    <td><%=person.Email %></td>

  </tr>

  <% } %>

</table>

Теперь у нас есть только одна вещь — мы должны написать некоторый код, который присоединяет контекстное меню к ячейкам таблицы.

Перехват событий контекстного меню

Теперь мы заставим все работать. Расслабьтесь, это всего лишь пара строк кода, благодаря jQuery. 


<script type="text/javascript">

  $(document).ready(function () {

    $('td.showContext').contextMenu('myMenu1', {

 

      bindings: {

        'email': function (t) {

          document.location.href = '/contact/sendmail/' + t.id;

        },

        'homepage': function (t) {

          document.location.href = '/contact/homepage/' + t.id;

        }

      }

    });

  });

</script>

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

Теперь мы закончили. Сохраните все файлы, скомпилируйте решение, запустите его и попробуйте, как работает контекстное меню.

Вывод

Мы увидели, что использование jQuery с компонентом контекстного меню позволяет нам легко создавать мощные контекстные меню для наших пользовательских интерфейсов. Контекстное меню было очень легко определить. Мы также смогли прикрепить контекстное меню к таблице и использовать идентификатор текущей строки строки также в событиях контекстного меню. Чтобы достичь этого, нам потребовалось лишь несколько незначительных модификаций и несколько строк JavaScript.

40
Share: