Go homepage(回首页)
Upload pictures (上传图片)
Write articles (发文字帖)

The author:(作者)delv
published in(发表于) 2014/1/16 9:33:19
扩展GridView控件(九)——给数据行增加右键菜单_[Asp.Net教程]

扩展GridView控件(九)——给数据行增加右键菜单_[Asp.Net教程]

















GridView既强大又好用。为了让它更强大、更好用,我们来写一个继承自GridView的控件。
[源码下载]
http://files.cnblogs.com/webabcd/yycontrols.rar




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




控件开发
1、新建一个继承自GridView的类。
复制C#代码保存代码///


/// 继承自GridView
///

[ToolboxData(@"<{0}:SmartGridView runat='server'>")]
public class SmartGridView : GridView
{
}
2、新建一个ContextMenu实体类,有六个属性
复制C#代码保存代码using System;
using System.Collections.Generic;
using System.Text;




using System.ComponentModel;
using System.Web.UI;




namespace YYControls.SmartGridView
{
///


/// ContextMenu 的摘要说明。
///

[ToolboxItem(false)]
public class ContextMenu
{
private string _icon;
///
/// 文字左边的图标的链接
///

public string Icon
{
get { return _icon; }
set { _icon = value; }
}




private string _text;
///


/// 菜单的文字
///

public string Text
{
get { return _text; }
set { _text = value; }
}




private string _commandButtonId;
///


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

public string CommandButtonId
{
get { return _commandButtonId; }
set { _commandButtonId = value; }
}




private string _navigateUrl;
///


/// 链接的url
///

public string NavigateUrl
{
get { return _navigateUrl; }
set { _navigateUrl = value; }
}




private ItemTypeCollection _itemType;
///


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

public ItemTypeCollection ItemType
{
get { return _itemType; }
set { _itemType = value; }
}




private TargetCollection _target;
///


/// 链接的target
///

public TargetCollection Target
{
get { return _target; }
set { _target = value; }
}





///


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

public enum ItemTypeCollection
{
///
/// 链接
///

Link,
///
/// 按钮
///

Command,
///
/// 分隔线
///

Separator
}




///


/// 链接的target
///

public enum TargetCollection
{
///
/// 新开窗口
///

Blank,
///
/// 当前窗口
///

Self,
///
/// 跳出框架
///

Top
}
}
}
3、新建一个继承自CollectionBase的类ContextMenus
复制C#代码保存代码using System.Collections;
using System.ComponentModel;
using System.Web.UI;




namespace YYControls.SmartGridView
{
///


/// ContextMenus 的摘要说明。
/// 注意要继承自CollectionBase
///

[
ToolboxItem(false),
ParseChildren(true)
]
public class ContextMenus : CollectionBase
{
///
/// 构造函数
///

public ContextMenus()
: base()
{
}




///


/// 实现IList接口
/// 获取或设置指定索引处的元素。
///

/// 要获得或设置的元素从零开始的索引
///
public ContextMenu this[int index]
{
get
{
return (ContextMenu) base.List[index];
}
set
{
base.List[index] = (ContextMenu) value;
}
}




///


/// 实现IList接口
/// 将某项添加到 System.Collections.IList 中。
///

/// 要添加到 System.Collections.IList 的 System.Object。
public void Add(ContextMenu item)
{
base.List.Add(item);
}




///


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

/// 要从 System.Collections.IList 移除的 System.Object
public void Remove(int index)
{
if (index > -1 && index < base.Count)
{
base.List.RemoveAt(index);
}
}





///


/// ToString()
///

///
public override string ToString()
{
return "ContextMenus";
}
}
}
4、在继承自GridView的类中加一个复杂对象属性,该复杂对象就是第3步创建的那个ContextMenus
复制C#代码保存代码private ContextMenus _contextMenus;
///
/// 行的右键菜单集合
///

[
PersistenceMode(PersistenceMode.InnerProperty),
DesignerSerializationVisibility(DesignerSerializationVisibility.Content),
Description("行的右键菜单"),
Category("扩展")
]
public virtual ContextMenus ContextMenus
{
get
{
if (_contextMenus == null)
{
_contextMenus = new ContextMenus();
}
return _contextMenus;
}
}
5、新建一个JavaScriptConstant类,把我们要用到的javascript存在一个常量里
复制C#代码保存代码using System;
using System.Collections.Generic;
using System.Text;




namespace YYControls.SmartGridView
{
///


/// javascript
///

public class JavaScriptConstant
{
internal const string jsContextMenu = @"";
}
}
6、重写OnPreRender方法,注册上面那段客户端脚本
复制C#代码保存代码///
/// OnPreRender
///

///
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的数据行增加右键菜单的功能
复制C#代码保存代码///


/// OnRowDataBound
///

///
protected override void OnRowDataBound(GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// 给数据行增加客户端代码
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
复制C#代码保存代码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;




///


/// OjbData 的摘要说明
///

public class OjbData
{
public OjbData()
{
//
// TOD 在此处添加构造函数逻辑
//
}




[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
复制ASPX代码保存代码<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>







SmartGridView测试




AutoGenerateColumns="false">



















Target="Blank" />


TypeName="OjbData">



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







SmartGridView测试




AutoGenerateColumns="false">



















Target="Blank" />


TypeName="OjbData">




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




转自【webabcd-.NET】

























If you have any requirements, please contact webmaster。(如果有什么要求,请联系站长)





QQ:154298438
QQ:417480759