GridView既强大又好用。为了让它更强大、更好用，我们来写一个继承自GridView的控件。
[索引页]
[源码下载]
扩展GridView控件(9) - 给数据行增加右键菜单
作者：
webabcd
/*正式版的实现 开始*/
介绍
扩展GridView控件：
给数据行增加右键菜单，响应服务端事件或超级链接
使用方法（设置ContextMenus集合属性）：
Text - 菜单的文本内容
BoundCommandName - 需要绑定的CommandName
NavigateUrl - 链接的URL
Target - 链接的目标窗口或框架
SmartGridView的属性ContextMenuCssClass - 右键菜单的级联样式表 CSS 类名（右键菜单的结构div ul li a）
关键代码
js
/**//*右键菜单 开始*/
yy_sgv_rightMenu = function ()
{
/// <summary>构造函数</summary>
this._menu = null;
this._menuItem = null;
this._handle = null;
this._target = null;
this._cssClass = null
};
yy_sgv_rightMenu.prototype =
{
/// <summary>相关属性和相关方法</summary>
get_menu: function()
{
return this._menu;
},
set_menu: function(value)
{
this._menu = value;
},
get_handle: function()
{
return this._handle;
},
set_handle: function(value)
{
this._handle = value;
},
get_target: function()
{
return this._target;
},
set_target: function(value)
{
this._target = value;
},
get_cssClass: function()
{
return this._cssClass;
},
set_cssClass: function(value)
{
this._cssClass = value;
},
get_menuItem: function()
{
return this._menuItem;
},
set_menuItem: function(value)
{
this._menuItem = value;
},
show:function(e)
{
if (this.get_menuItem() == null)
{
this.hidden();
return true;
}
var rightMenu = this.get_menu();
if (rightMenu == null)
{
rightMenu = document.createElement("div");
}
var menuInnerHTML = ""; // 菜单容器里的HTML内容
var $items = this.get_menuItem();
var $handle = this.get_handle();
var $target = this.get_target();
rightMenu.className = "yy_sgv_rightMenuBase";
if (this.get_cssClass() == null || this.get_cssClass() == "")
rightMenu.className += " " + "yy_sgv_rightMenu";
else
rightMenu.className += " " + this.get_cssClass();
menuInnerHTML += "<ul>";
for (var i in $items)
{
if ($items[i].indexOf("<hr") != -1)
{
menuInnerHTML += $items[i];
}
else
{
if ($target[i] == "")
{
$target[i] = "_self";
}
menuInnerHTML += "<li><a href=\"" + $handle[i] + "\" target=\"" + $target[i] + "\">";
menuInnerHTML += $items[i];
menuInnerHTML += "</a></li>";
}
}
menuInnerHTML += "</ul>";
// alert(menuInnerHTML);
rightMenu.innerHTML = menuInnerHTML;
rightMenu.style.visibility = "visible";
rightMenu.onmousedown = function(e)
{
e=e||window.event;
document.all ? e.cancelBubble = true : e.stopPropagation();
}
rightMenu.onselectstart = function()
{
return false;
}
document.body.appendChild(rightMenu);
this.set_menu(rightMenu); // 方便别的方法引用
e = e || window.event;
var root = document.documentElement;
var x = root.scrollLeft + e.clientX;
var y = root.scrollTop + e.clientY;
if (this.get_menu().clientWidth+e.clientX > root.clientWidth)
{
x = x - this.get_menu().clientWidth;
}
if (this.get_menu().clientHeight+e.clientY > root.clientHeight)
{
y = y - this.get_menu().clientHeight;
}
this.get_menu().style.left = x + "px";
this.get_menu().style.top = y + "px";
this.get_menu().style.visibility = "visible";
this.set_handle(null);
this.set_menuItem(null);
this.set_target(null);
return false;
},
hidden:function()
{
if (this.get_menu() != null)
{
this.get_menu().style.visibility = "hidden";
}
}
}
if (document.all)
{
window.attachEvent('onload', yy_sgv_rightMenu = new yy_sgv_rightMenu())
}
else
{
window.addEventListener('load', yy_sgv_rightMenu = new yy_sgv_rightMenu(), false);
}
function yy_sgv_setRightMenu(handle, menuItem, target, cssClass)
{
/// <summary>设置需要显示的右键菜单</summary>
yy_sgv_rightMenu.set_handle(handle);
yy_sgv_rightMenu.set_menuItem(menuItem);
yy_sgv_rightMenu.set_target(target);
yy_sgv_rightMenu.set_cssClass(cssClass);
}
/**//*右键菜单 结束*/
css
/**//*右键菜单必须要具有的样式*/
.yy_sgv_rightMenuBase
{}{
visibility: hidden;
position: absolute;
}
/**//*右键菜单的示例样式 开始*/
.yy_sgv_rightMenu
{}{
border-right: 2px outset;
border-top: 2px outset;
border-left: 2px outset;
border-bottom: 2px outset;
background-color: buttonface;
}
.yy_sgv_rightMenu hr
{}{
width: 300px;
}
.yy_sgv_rightMenu ul
{}{
list-style: none; margin:0; padding:0;
}
.yy_sgv_rightMenu ul li
{}{
vertical-align: bottom;
}
.yy_sgv_rightMenu A {}{ color: MenuText; text-decoration: none; display: block; width: 300px; text-align:center; line-height:20px }
.yy_sgv_rightMenu A:link {}{ color: MenuText; text-decoration: none; }
.yy_sgv_rightMenu A:active {}{ color: MenuText; text-decoration: none; }
.yy_sgv_rightMenu A:visited {}{ color: MenuText; text-decoration: none; }
.yy_sgv_rightMenu A:hover {}{ color: HighlightText; background-color: Highlight; }
/**//*右键菜单的示例样式 结束*/
c#
using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls;
using System.Web.UI;
namespace YYControls.SmartGridViewFunction
{
/**//// <summary>
/// 扩展功能：给数据行增加右键菜单
/// </summary>
public class ContextMenuFunction : ExtendFunction
{
List<string> _rowRightClickButtonUniqueIdList = new List<string>();
private string _menuItem;
private string _target;
/**//// <summary>
/// 构造函数
/// </summary>
public ContextMenuFunction()
: base()
{
}
/**//// <summary>
/// 构造函数
/// </summary>
/// <param name="sgv">SmartGridView对象</param>
public ContextMenuFunction(SmartGridView sgv)
: base(sgv)
{
}
/**//// <summary>
/// 扩展功能的实现
/// </summary>
protected override void Execute()
{
this._sgv.RowDataBoundDataRow += new SmartGridView.RowDataBoundDataRowHandler(_sgv_RowDataBoundDataRow);
this._sgv.PreRender += new EventHandler(_sgv_PreRender);
this._sgv.RenderBegin