扩展GridView控件(9) - 给数据行增加右键菜单

GridView既强大又好用。为了让它更强大、更好用，我们来写一个继承自GridView的控件。
[索引页]
[源码下载]

作者：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; }

/*右键菜单的示例样式结束*/

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 += new SmartGridView.RenderBeginHandler(_sgv_RenderBegin);

foreach (ContextMenu cm in this._sgv.ContextMenus)

{

string text = cm.Text == null ? "" : cm.Text;

string target = cm.Target == null ? "" : cm.Target;

this._menuItem += String.Format(",\"{0}\"", text.Replace(",", "，"));

this._target += String.Format(",\"{0}\"", target.Replace(",", "，"));

}

this._menuItem = String.Format("new Array({0})", this._menuItem.TrimStart(','));

this._target = String.Format("new Array({0})", this._target.TrimStart(','));

}

void _sgv_RowDataBoundDataRow(object sender, GridViewRowEventArgs e)

{

string handle = "";

// 从用户定义的ContextMenus集合中分解出ContextMenu

foreach (ContextMenu cm in this._sgv.ContextMenus)

{

if (!String.IsNullOrEmpty(cm.NavigateUrl))

{

handle += String.Format(",\"{0}\"", cm.NavigateUrl);

continue;

}

else if (String.IsNullOrEmpty(cm.BoundCommandName))

{

handle += String.Format(",\"{0}\"", "#");

continue;

}

foreach (TableCell tc in e.Row.Cells)

{

bool bln = false;

foreach (Control c in tc.Controls)

{

// 如果控件继承自接口IButtonControl

if (c is IButtonControl

&& ((IButtonControl)c).CommandName == cm.BoundCommandName)

{

handle += String.Format(",\"{0}\"", this._sgv.Page.ClientScript.GetPostBackClientHyperlink(c, ""));

_rowRightClickButtonUniqueIdList.Add(c.UniqueID);

bln = true;

break;

}

if (bln)

{

break;

}

handle = String.Format("new Array({0})", handle.TrimStart(','));

string oncontextmenuValue =

String.Format

(

"yy_sgv_setRightMenu({0},{1}_rightMenuItem,{1}_rightMenuTarget, {2})",

handle,

this._sgv.ClientID,

String.IsNullOrEmpty(this._sgv.ContextMenuCssClass) ? "null" : "'" + this._sgv.ContextMenuCssClass + "'"

);

// 设置按钮的客户端属性

YYControls.Helper.Common.SetAttribute(

e.Row,

"oncontextmenu",

oncontextmenuValue,

AttributeValuePosition.Last);

}

/// <summary>

/// SmartGridView的PreRender事件

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

void _sgv_PreRender(object sender, EventArgs e)

{

// 构造所需脚本

string scriptString = "";

scriptString += "document.oncontextmenu=function(evt){return yy_sgv_rightMenu.show(evt);};";

scriptString += "document.onclick=function(){yy_sgv_rightMenu.hidden();};";

// 注册所需脚本

if (!this._sgv.Page.ClientScript.IsClientScriptBlockRegistered("yy_sgv_rightMenu"))

{

this._sgv.Page.ClientScript.RegisterClientScriptBlock

(

this._sgv.GetType(),

"yy_sgv_rightMenu",

scriptString,

true

);

}

// 为每个SmartGridView注册与右键菜单相关的变量

if (!this._sgv.Page.ClientScript.IsClientScriptBlockRegistered(String.Format("yy_sgv_rightMenu_{0}", this._sgv.ClientID)))

{

this._sgv.Page.ClientScript.RegisterClientScriptBlock

(

this._sgv.GetType(),

String.Format("yy_sgv_rightMenu_{0}", this._sgv.ClientID),

String.Format(

"var {0}_rightMenuItem={1};var {0}_rightMenuTarget={2};",

this._sgv.ClientID,

this._menuItem,

this._target),

true

);

}

/// <summary>

/// RenderBegin

/// </summary>

/// <param name="sender"></param>

/// <param name="writer"></param>

void _sgv_RenderBegin(object sender, HtmlTextWriter writer)

{

foreach (string uniqueId in this._rowRightClickButtonUniqueIdList)

{

// 注册回发或回调数据以进行验证

this._sgv.Page.ClientScript.RegisterForEventValidation(uniqueId);

}

/*正式版的实现结束*/

/*测试版的实现开始*/

介绍
给GridView的数据行增加右键菜单可以增加用户体验，不过实现起来挺麻烦的，现在我们扩展一下GridView控件以实现这样的功能。

控件开发
1、新建一个继承自GridView的类。

/// <summary>

/// 继承自GridView

/// </summary>

[ToolboxData(@"<{0}:SmartGridView runat='server'></{0}:SmartGridView>")]

public class SmartGridView : GridView

{

}

2、新建一个ContextMenu实体类，有六个属性

using System;

using System.Collections.Generic;

using System.Text;

using System.ComponentModel;

using System.Web.UI;

namespace YYControls.SmartGridView

{

/// <summary>

/// ContextMenu 的摘要说明。

/// </summary>

[ToolboxItem(false)]

public class ContextMenu

{

private string _icon;

/// <summary>

/// 文字左边的图标的链接

/// </summary>

public string Icon

{

get { return _icon; }

set { _icon = value; }

}

private string _text;

/// <summary>

/// 菜单的文字

/// </summary>

public string Text

{

get { return _text; }

set { _text = value; }

}

private string _commandButtonId;

/// <summary>

/// 所调用的命令按钮的ID

/// </summary>

public string CommandButtonId

{

get { return _commandButtonId; }

set { _commandButtonId = value; }

}

private string _navigateUrl;

/// <summary>

/// 链接的url

/// </summary>

public string NavigateUrl

{

get { return _navigateUrl; }

set { _navigateUrl = value; }

}

private ItemTypeCollection _itemType;

/// <summary>

/// 右键菜单的项的类别

/// </summary>

public ItemTypeCollection ItemType

{

get { return _itemType; }

set { _itemType = value; }

}

private TargetCollection _target;

/// <summary>

/// 链接的target

/// </summary>

public TargetCollection Target

{

get { return _target; }

set { _target = value; }

}

/// <summary>

/// 右键菜单的项的类别

/// </summary>

public enum ItemTypeCollection

{

/// <summary>

/// 链接

/// </summary>

Link,

/// <summary>

/// 按钮

/// </summary>

Command,

/// <summary>

/// 分隔线

/// </summary>

Separator

}

/// <summary>

/// 链接的target

/// </summary>

public enum TargetCollection

{

/// <summary>

/// 新开窗口

/// </summary>

Blank,

/// <summary>

/// 当前窗口

/// </summary>

Self,

/// <summary>

/// 跳出框架

/// </summary>

Top

}

3、新建一个继承自CollectionBase的类ContextMenus

using System.Collections;

using System.ComponentModel;

using System.Web.UI;

namespace YYControls.SmartGridView

{

/// <summary>

/// ContextMenus 的摘要说明。

/// 注意要继承自CollectionBase

/// </summary>

[

ToolboxItem(false),

ParseChildren(true)

]

public class ContextMenus : CollectionBase

{

/// <summary>

/// 构造函数

/// </summary>

public ContextMenus()

: base()

{

}

/// <summary>

/// 实现IList接口

/// 获取或设置指定索引处的元素。

/// </summary>

/// <param name="index">要获得或设置的元素从零开始的索引</param>

/// <returns></returns>

public ContextMenu this[int index]

{

get

{

return (ContextMenu)base.List[index];

}

set

{

base.List[index] = (ContextMenu)value;

}

/// <summary>

/// 实现IList接口

/// 将某项添加到 System.Collections.IList 中。

/// </summary>

/// <param name="item">要添加到 System.Collections.IList 的 System.Object。</param>

public void Add(ContextMenu item)

{

base.List.Add(item);

}

/// <summary>

/// 实现IList接口

/// 从 System.Collections.IList 中移除特定对象的第一个匹配项。

/// </summary>

/// <param name="index">要从 System.Collections.IList 移除的 System.Object</param>

public void Remove(int index)

{

if (index > -1 && index < base.Count)

{

base.List.RemoveAt(index);

}

/// <summary>

/// ToString()

/// </summary>

/// <returns></returns>

public override string ToString()

{

return "ContextMenus";

}

4、在继承自GridView的类中加一个复杂对象属性，该复杂对象就是第3步创建的那个ContextMenus

private ContextMenus _contextMenus;

/// <summary>

/// 行的右键菜单集合

/// </summary>

[

PersistenceMode(PersistenceMode.InnerProperty),

DesignerSerializationVisibility(DesignerSerializationVisibility.Content),

Description("行的右键菜单"),

Category("扩展")

]

public virtual ContextMenus ContextMenus

{

get

{

if (_contextMenus == null)

{

_contextMenus = new ContextMenus();

}

return _contextMenus;

}

5、新建一个JavaScriptConstant类，把我们要用到的javascript存在一个常量里

using System;

using System.Collections.Generic;

using System.Text;

namespace YYControls.SmartGridView

{

/// <summary>

/// javascript

/// </summary>

public class JavaScriptConstant

{

internal const string jsContextMenu = @"<script type=""text/javascript"">

//<![CDATA[

// 数据行的ClientId

var _rowClientId = '';

// 以下实现右键菜单，网上找的，不知道原创是谁

function contextMenu()

{

this.items = new Array();

this.addItem = function (item)

{

this.items[this.items.length] = item;

}

this.show = function (oDoc)

{

var strShow = '';

var i;

// 加上word-break: keep-all; 防止菜单项换行

strShow = ""<div id='rightmenu' style='word-break: keep-all;BACKGROUND-COLOR: #ffffff; BORDER: #000000 1px solid; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; Z-INDEX: 10'>"";

strShow += ""<table border='0' height='"";

strShow += this.items.length * 20;

strShow += ""' cellpadding='0' cellspacing='0'>"";

strShow += ""<tr height='3'><td bgcolor='#d0d0ce' width='2'></td><td>"";

strShow += ""<table border='0' width='100%' height='100%' cellpadding=0 cellspacing=0 bgcolor='#ffffff'>"";

strShow += ""<tr><td bgcolor='#d0d0ce' width='23'></td><td><img src=' ' height='1' border='0'></td></tr></table>"";

strShow += ""</td><td width='2'></td></tr>"";

strShow += ""<tr><td bgcolor='#d0d0ce'></td><td>"";

strShow += ""<table border='0' width='100%' height='100%' cellpadding=3 cellspacing=0 bgcolor='#ffffff'>"";

oDoc.write(strShow);

for(i=0; i<this.items.length; i++)

{

this.items[i].show(oDoc);

}

strShow = ""</table></td><td></td></tr>"";

strShow += ""<tr height='3'><td bgcolor='#d0d0ce'></td><td>"";

strShow += ""<table border='0' width='100%' height='100%' cellpadding=0 cellspacing=0 bgcolor='#ffffff'>"";

strShow += ""<tr><td bgcolor='#d0d0ce' width='23'></td><td><img src=' ' height='1' border='0'></td></tr></table>"";

strShow += ""</td><td></td></tr>"";

strShow += ""</table></div>\n"";

oDoc.write(strShow);

}

function contextItem(text, icon, cmd, url, target, type)

{

this.text = text ? text : '';

this.icon = icon ? icon : '';

this.cmd = cmd ? cmd : '';

this.url = url ? url : '';

this.target =target ? target : '';

this.type = type ? type : 'Link';

this.show = function (oDoc)

{

var strShow = '';

if(this.type == 'Link' || this.type == 'Command')

{

strShow += ""<tr "";

strShow += ""onmouseover=\""changeStyle(this, 'on');\"" "";

strShow += ""onmouseout=\""changeStyle(this, 'out');\"" "";

if (this.type == 'Command')

{

// 右键菜单是按钮类型，调用所对应的按钮的click事件

strShow += ""onclick=\""document.getElementById("";

strShow += ""_rowClientId + "";

strShow += ""'_"";

strShow += this.cmd;

strShow += ""').click()"";

}

else

{

// 右键菜单是链接类型

if (this.target == 'Top') this.target = 'top';

if (this.target == 'Self') this.target = 'self';

if (this.target == 'top' || this.target == 'self')

{

strShow += ""onclick=\"""";

strShow += this.target;

strShow += "".location='"";

strShow += this.url;

strShow += ""'"";

}

else

{

strShow += ""onclick=\""window.open('"";

strShow += this.url;

strShow += ""')"";

}

strShow += ""\"">"";

strShow += ""<td class='ltdexit' width='16'>"";

if (this.icon == '')

{

strShow += ' ';

}

else

{

strShow += ""<img border='0' src='"";

strShow += this.icon;

strShow += ""' width='16' height='16' style='POSITION: relative'></img>"";

}

strShow += ""</td><td class='mtdexit'>"";

strShow += this.text;

strShow += ""</td><td class='rtdexit' width='5'> </td></tr>"";

}

// 右键菜单是分隔线

else if (this.type == 'Separator')

{

strShow += ""<tr><td class='ltdexit'> </td>"";

strShow += ""<td class='mtdexit' colspan='2'><hr color='#000000' size='1'></td></tr>"";

}

oDoc.write(strShow);

}

function changeStyle(obj, cmd)

{

if(obj)

{

try

{

var imgObj = obj.children(0).children(0);

if(cmd == 'on')

{

obj.children(0).className = 'ltdfocus';

obj.children(1).className = 'mtdfocus';

obj.children(2).className = 'rtdfocus';

if(imgObj)

{

if(imgObj.tagName.toUpperCase() == 'IMG')

{

imgObj.style.left = '-1px';

imgObj.style.top = '-1px';

}

else if(cmd == 'out')

{

obj.children(0).className = 'ltdexit';

obj.children(1).className = 'mtdexit';

obj.children(2).className = 'rtdexit';

if(imgObj)

{

if(imgObj.tagName.toUpperCase() == 'IMG')

{

imgObj.style.left = '0px';

imgObj.style.top = '0px';

}

catch (e) {}

}

function showMenu(rowClientId)

{

_rowClientId = rowClientId;

var x, y, w, h, ox, oy;

x = event.clientX;

y = event.clientY;

var obj = document.getElementById('rightmenu');

if (obj == null)

return true;

ox = document.body.clientWidth;

oy = document.body.clientHeight;

if(x > ox || y > oy)

return false;

w = obj.offsetWidth;

h = obj.offsetHeight;

if((x + w) > ox)

x = x - w;

if((y + h) > oy)

y = y - h;

// obj.style.posLeft = x + document.body.scrollLeft;

// obj.style.posTop = y + document.body.scrollTop;

// xhtml不支持上面的了

// 就是说如果你的页头声明了页是xhtml的话就不能用上面那句了，vs2005创建的aspx会默认加上xhtml声明

// 此时应该用如下的方法

obj.style.posLeft = x + document.documentElement.scrollLeft;

obj.style.posTop = y + document.documentElement.scrollTop;

obj.style.visibility = 'visible';

return false;

}

function hideMenu()

{

if(event.button == 0)

{

var obj = document.getElementById('rightmenu');

if (obj == null)

return true;

obj.style.visibility = 'hidden';

obj.style.posLeft = 0;

obj.style.posTop = 0;

}

function writeStyle()

{

var strStyle = '';

strStyle += ""<STYLE type='text/css'>"";

strStyle += ""TABLE {Font-FAMILY: 'Tahoma','Verdana','宋体'; FONT-SIZE: 9pt}"";

strStyle += "".mtdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; CURSOR: hand}"";

strStyle += "".mtdexit {BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid}"";

strStyle += "".ltdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; CURSOR: hand}"";

strStyle += "".ltdexit {BACKGROUND-COLOR: #d0d0ce; BORDER-BOTTOM: #d0d0ce 1px solid; BORDER-TOP: #d0d0ce 1px solid; BORDER-LEFT: #d0d0ce 1px solid}"";

strStyle += "".rtdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; CURSOR: hand}"";

strStyle += "".rtdexit {BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-RIGHT: #ffffff 1px solid}"";

strStyle += ""</STYLE>"";

document.write(strStyle);

}

function makeMenu()

{

var myMenu, item;

myMenu = new contextMenu();

// 增加右键菜单项开始

// item = new contextItem("", "", "", "", "", "");

// 1-菜单项的文本

// 2-图标链接

// 3-所调用的命令按钮的ID

// 4-链接地址

// 5-链接的target

// 6-右键菜单的项的类别

// myMenu.addItem(item);

[$MakeMenu$]

// 增加右键菜单项结束

myMenu.show(this.document);

delete item;

delete myMenu;

}

function toggleMenu(isEnable)

{

if(isEnable)

document.oncontextmenu = showMenu;

else

document.oncontextmenu = new function() {return true;};

}

writeStyle();

makeMenu();

document.onclick = hideMenu;

//]]>

</script>";

}

6、重写OnPreRender方法，注册上面那段客户端脚本

/// <summary>

/// OnPreRender

/// </summary>

/// <param name="e"></param>

protected override void OnPreRender(EventArgs e)

{

if (ContextMenus.Count > 0)

{

StringBuilder sb = new StringBuilder();

foreach (ContextMenu cm in ContextMenus)

{

// item = new contextItem("", "", "", "", "", "");

// 1-菜单项的文本

// 2-图标链接

// 3-所调用的命令按钮的ID

// 4-链接地址

// 5-链接的target

// 6-右键菜单的项的类别

// 命令按钮

if (cm.ItemType == ContextMenu.ItemTypeCollection.Command)

{

sb.Append("item = new contextItem(\"" + cm.Text +

"\", \"" + ResolveUrl(cm.Icon) + "\", \"" +

cm.CommandButtonId + "\", \"\", \"\", \"Command\");");

}

// 链接

else if (cm.ItemType == ContextMenu.ItemTypeCollection.Link)

{

sb.Append("item = new contextItem(\"" + cm.Text +

"\", \"" + ResolveUrl(cm.Icon) + "\", \"\", \"" +

cm.NavigateUrl + "\", \"" +

cm.Target + "\", \"Link\");");

}

// 分隔线

else if (cm.ItemType == ContextMenu.ItemTypeCollection.Separator)

{

sb.Append("item = new contextItem(\"\", \"\", \"\", \"\", \"\", \"Separator\");");

}

sb.Append("myMenu.addItem(item);");

}

// 注册客户端代码

if (!Page.ClientScript.IsClientScriptBlockRegistered("jsContextMenu"))

{

Page.ClientScript.RegisterClientScriptBlock(

this.GetType(),

"jsContextMenu", JavaScriptConstant.jsContextMenu.Replace("[$MakeMenu$]", sb.ToString())

);

}

base.OnPreRender(e);

}

7、重写OnRowDataBound给数据行增加客户端代码以调用我们注册的那段javascript，从而实现给GridView的数据行增加右键菜单的功能。

/// <summary>

/// OnRowDataBound

/// </summary>

/// <param name="e"></param>

protected override void OnRowDataBound(GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

if (ContextMenus.Count > 0)

{

// 给数据行增加客户端代码

e.Row.Attributes.Add("oncontextmenu", "showMenu('" + e.Row.ClientID + "');return false;");

}

base.OnRowDataBound(e);

}

控件使用
添加这个控件到工具箱里，然后拖拽到webform上，设置如下属性：ItemType为右键菜单的项的类别（Link，Command，Separator）；Icon为文字左边的图标的链接；Text为菜单的文字；CommandButtonId为所调用的命令按钮的ID；NavigateUrl为链接的url；Target为链接的target（Blank，Self，Top）
ObjData.cs

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.ComponentModel;

/// <summary>

/// OjbData 的摘要说明

/// </summary>

public class OjbData

{

public OjbData()

{

// TODO: 在此处添加构造函数逻辑

}

[DataObjectMethod(DataObjectMethodType.Select, true)]

public DataTable Select()

{

DataTable dt = new DataTable();

dt.Columns.Add("no", typeof(string));

dt.Columns.Add("name", typeof(string));

for (int i = 0; i < 30; i++)

{

DataRow dr = dt.NewRow();

dr[0] = "no" + i.ToString().PadLeft(2, '0');

dr[1] = "name" + i.ToString().PadLeft(2, '0');

dt.Rows.Add(dr);

}

return dt;

}

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>SmartGridView测试</title>

</head>

<body>

<div>

<yyc:SmartGridView ID="SmartGridView1" runat="server" DataSourceID="ObjectDataSource1"

AutoGenerateColumns="false">

<asp:BoundField DataField="no" HeaderText="序号" SortExpression="no" ItemStyle-Width="100px" />

<asp:BoundField DataField="name" HeaderText="名称" SortExpression="name" ItemStyle-Width="100px" />

<asp:BoundField DataField="no" HeaderText="序号" SortExpression="no" ItemStyle-Width="100px" />

<asp:BoundField DataField="name" HeaderText="名称" SortExpression="name" ItemStyle-Width="100px" />

<asp:BoundField DataField="no" HeaderText="序号" SortExpression="no" ItemStyle-Width="100px" />

<asp:BoundField DataField="name" HeaderText="名称" SortExpression="name" ItemStyle-Width="100px" />

<asp:TemplateField>

<asp:Button id="btnRightMenuButton" runat="server" CommandName="RightMenuButton" CommandArgument='<%# Container.DataItemIndex %>' />

</itemtemplate>

</asp:TemplateField>

</Columns>

<yyc:ContextMenu ItemType="Command" Text="右键菜单按钮测试" Icon="~/Images/button.gif" CommandButtonId="btnRightMenuButton" />

<yyc:ContextMenu ItemType="Separator" />

<yyc:ContextMenu ItemType="Link" Text="控件源代码" Icon="~/Images/button.gif" NavigateUrl="http://webabcd.cnblogs.com"

Target="Blank" />

</ContextMenus>

</yyc:SmartGridView>

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="Select"

TypeName="OjbData"></asp:ObjectDataSource>

</div>

</form>

</body>

</html>

注：如果想修改右键菜单的样式，请自行修改javascript，我就不把他们弄出来了。

/*测试版的实现结束*/

OK
[源码下载]

posted @ 2007-02-01 22:19 webabcd 阅读(23151) 评论(85) 编辑收藏举报

刷新页面返回顶部

扩展GridView控件(9) - 给数据行增加右键菜单

公告