扩展ASP.NET中DataGrid的UI功能

DataGrid是一个功能强大的服务器控件，它把数据绑定信息显示在一个HTML表格中。但还有几个UI功能，DataGrid中没有实现，例如：当鼠标滑到表格中的某行时，该行背景颜色发生变化，鼠标离开后，背景颜色恢复；还有当表格某一列可以排序时，通常在列标题会有一个提示文本“按该列排序”。下面我们介绍如何把这些功能加入到DataGrid。
外观
创建一个外观（Facade）类

WebUIFacade

，

提供简单的接口，

Facade

是一种面向对象的设计模式。该类提供了几个方法来扩展

DataGrid

的功能。

注意：

方法

SetRowHover

需要你有一个名称为

gridHover

的样式，它是鼠标滑动到当前行时背景色将要变化的颜色。

外观类代码

usingSystem;

usingSystem.Collections;

usingSystem.ComponentModel;

usingSystem.Data;

usingSystem.Drawing;

usingSystem.Web;

usingSystem.Web.SessionState;

usingSystem.Web.UI;

usingSystem.Web.UI.WebControls;

usingSystem.Web.UI.HtmlControls;

namespaceYourProject.WebApp

{

publicclassWebUIFacade

{

publicWebUIFacade()

{

}

///<SUMMARY>

///该方法为列标题创建提示.

///注意:只有Grid设置为可排序才能使用

///</SUMMARY>

publicvoid

SetHeaderToolTip(System.Web.UI.WebControls.DataGridItemEventArgse)

{

//Istheitemtypeoftypeheader?

if(e.Item.ItemType==ListItemType.Header)

{

stringheaderText="";

//Addtheonmouseoverandonmouseout

//attributetoeachheaderitem.

foreach(TableCellcelline.Item.Cells)

{

try

{

LinkButtonlb=(LinkButton)cell.Controls[0];

headerText="";

if(lb!=null)

{

headerText=lb.Text;

}

lb.ToolTip="SortBy"+lb.Text;

}

catch{}

}

}

}

///<SUMMARY>

///Thismethodchangesthecoloroftherowwhenthemouseisoverit.

///Note:YoumusthaveaclasscalledgridHover

///thatsetsthecolorofthehoverrow.

///</SUMMARY>

///<PARAMname="dg">DataGrid</PARAM>

///<PARAMname="e">DataGridItemEventArgs</PARAM>

publicvoidSetRowHover(DataGriddg,

System.Web.UI.WebControls.DataGridItemEventArgse)

{

try

{

stringclassName="";

//Istheitemanitemoralternatingitem?

if((e.Item.ItemType==ListItemType.Item)||

(e.Item.ItemType==ListItemType.AlternatingItem))

{

//Istheitemtypeoftypeitem?

if(e.Item.ItemType==ListItemType.Item)

{

className=dg.ItemStyle.CssClass;

}

elseif(e.Item.ItemType==ListItemType.AlternatingItem)

{

className=dg.AlternatingItemStyle.CssClass;

}

e.Item.Attributes.Add("onmouseover",

"this.className='gridHover';");

e.Item.Attributes.Add("onmouseout",

"this.className='"+className+"';");

}

}

catch

{

}

}

///<SUMMARY>

///ThismethodsetstheCssStyleforalinkbutton

///containedinthedatagriditem,alternatingitem,

///oredititemrow.

///</SUMMARY>

///<PARAMname="e">DataGridItemEventArgs</PARAM>

publicvoid

SetGridLinkButtonStyle(System.Web.UI.WebControls.DataGridItemEventArgse)

{

if(e.Item.ItemType==ListItemType.Item||

e.Item.ItemType==ListItemType.AlternatingItem||

e.Item.ItemType==ListItemType.EditItem)

{

foreach(TableCellcelline.Item.Cells)

{

try

{

LinkButtonlb=(LinkButton)cell.Controls[0];

if(lb!=null)

{

lb.CssClass="GridLink";

}

}

catch{}

}

}

}

}

}

变色样式

这就是

WebUIFacade.SetRowHover

所用到的变色样式。

.gridHover

{

background-color:#ffffcc;

}

DataGrid的代码
为了使用

WebUIFacade

所提供的方法，必须在DataGrid的ItemCreated事件中实例化外观类。

privatevoiddataGrid_ItemCreated(objectsender,

System.Web.UI.WebControls.DataGridItemEventArgse)

{

//实例化WebUIFacade.

WebUIFacadeuiFacade=newWebUIFacade();

//给每一个排序列加提示

uiFacade.SetHeaderToolTip(e);

uiFacade.SetGridLinkButtonStyle(e);

//鼠标滑动时设置当前行的背景颜色

uiFacade.SetRowHover(this.dataGrid,e);

}

使用代码

1.

Web工程中创建新类，名称为

WebUIFacade

2.

拷贝代码到您的类文件中。

3.

创建新的页面。

4.

添加

DataGrid

控件到您的新页面中。

5.拷贝对应的代码到ItemCreated事件中。6.把样式拷贝到您的Css文件中，并且该页面要包含该CSS文件。