65.9K
CodeProject 正在变化。 阅读更多。
Home

创建用于树视图的 jQuery 上下文菜单

Ronald G. Carrigan
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.63/5 (13投票s)

2009年4月27日

CPOL

2分钟阅读

viewsIcon

134569

downloadIcon

5503

用于树视图的 jQuery 上下文菜单

引言

我在互联网上寻找用于 ASP.NET 中 TreeView 的右键菜单，它应该像 WindowsForm 的 TreeView 一样工作。我找到一个，但它只在 Internet Explorer 6 上有效。因此，我认为它不是跨浏览器兼容性的可行解决方案。所以我去 jQuery.com 上找了一些插件，找到了一个由 Cory S.N. LaViska 编写的。

screenshot1.jpg

screenshot2.jpg

背景

我想要一个与 ASP.NET TreeView 一起使用的右键菜单，并提供以下功能

  1. 跨浏览器兼容
  2. 易于实现
  3. 足够可扩展，能够添加编辑、删除或向我的 TreeView 添加节点的功能

所以，我研究了 jQuery，它处理了跨浏览器兼容性问题。然后我找到了 LaViska 的右键菜单，它易于实现，并提供了我需要的可扩展性。

Using the Code

代码很简单。首先，我将 script 标签添加到页面，并添加了 CSS 文件引用。

<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.contextMenu.js" type="text/javascript"></script>
<link href="jquery.contextMenu.css" rel="stylesheet" type="text/css" />

其次，我在一个 div 中创建了一个 TreeView 控件，如下所示

<div id="MyTreeDiv">
<asp:TreeView ID="MyTreeView" runat="server" ExpandDepth="0">
<Nodes>
 <asp:TreeNode Text="node1" Value="f2571858-0eff-4260-9935-2f53d8e1bcd0">
   <asp:TreeNode Text="node10" Value="c1ddc0fc-c170-4a74-8de3-f1e85fdb2615">
     <asp:TreeNode Text="node100" Value="c2532e51-704f-45e9-abc7-f8a2a7b1f422" />
     <asp:TreeNode Text="node101" Value="d47ce54e-1c2b-45af-b767-e610f05e0960" />
     <asp:TreeNode Text="node102" Value="faa99883-4996-4ac4-afa1-a197df615a0b" />
     <asp:TreeNode Text="node103" Value="7c49a861-c253-49c4-86a5-9b1789187f80" />
     <asp:TreeNode Text="node104" Value="42def2d5-ae7a-4746-8223-63f762de058a" />
     <asp:TreeNode Text="node105" Value="ea0051a0-1122-432e-977b-46ef1e58f9c4" />
  </asp:TreeNode>
  </asp:TreeNode>
  <asp:TreeNode Text="node2" Value="bcb02fd7-d2fa-430a-b004-1d5f8e481a9f">
   <asp:TreeNode Text="node20" Value="42516600-21c3-4866-9d45-7e42e82997c4" />
   <asp:TreeNode Text="node21" Value="3802be53-69c7-4e45-85e6-863cabea238a" />
   <asp:TreeNode Text="node22" Value="e99019d4-243e-454d-a761-0b214a4bd893" />
   <asp:TreeNode Text="node23" Value="4cbc3de2-18c0-43da-b65d-493f9a84243e" />
   <asp:TreeNode Text="node24" Value="7a211df9-6ed5-4198-b5ab-665f39069541" />
   <asp:TreeNode Text="node25" Value="862dc876-8b92-437d-9947-833faea03ce4" />
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>

我使用了 GUID 作为值。这使得将 GUID 传递给另一个函数或页面更容易。

第三，我创建了我的右键菜单，并为其分配了一个名为 'contextMenu' 的类。这个类允许菜单在需要使用 jQuery 右键菜单提供的 jQuery 代码调用它之前被隐藏，代码如下

<ul id="myMenu" class="contextMenu">
    <li class="copy"><a href="#add">Add</a></li>
    <li class="edit"><a href="#edit">Edit</a></li> 
    <li class="delete"><a href="#delete">Delete</a></li>
    <li class="quit separator"><a href="#cancel">Cancel</a></li>
 </ul>

接下来，我将以下 JavaScript 代码添加到页面中

<script type="text/javascript">
$(document).ready(function() {
$("#MyTreeDiv A").contextMenu({
menu: 'myMenu'
}, function(action, el, pos) {
alert(
'Action: ' + action + '\n\n' +
'Element text: ' + $(el).text() + '\n\n' + 
'GUID: ' + getGUID($(el).attr("href")) + '\n\n' + 
'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' + 
'X: ' + pos.docX + ' Y: ' + pos.docY+ ' (relative to document)'
); }); });

function getGUID(mystr) {
var reGUID = /\w{8}[-]\w{4}[-]\w{4}[-]\w{4}[-]\w{12}/g 
var retArr = [];
var retval = '';
retArr = mystr.match(reGUID);
if(retArr != null)
{
retval = retArr[retArr.length - 1];
}
return retval;
}
</script>

第一个函数将右键菜单 'myMenu' 赋给包含我的 TreeView 的 div 'MyTreeDiv'。它基本上获取所有 <A> 标签，并将右键菜单添加到它们。
getGUID 函数从回发函数中获取 GUID。GUID 用于让我知道要处理哪个节点或项目。我可以很容易地将它传递给另一个函数或页面来编辑、删除或向我的树添加一个节点。

关注点

我惊叹于使用 jQuery 将右键菜单分配给 Treeview 的节点是多么简单。实际上，我正在一个应用程序中使用它，该应用程序使用 jQuery UI 弹出功能为我右键单击的每个节点弹出一个弹出窗口。 jQuery 让事情变得容易多了。

历史

  • 2009 年 4 月 27 日：初始发布
© . All rights reserved.