CSDN博客

img liushouqian

扩展ASP.NET中DataGrid的UI功能

发表于2004/12/30 16:25:00  490人阅读

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

外观

       创建一个外观(Facade)类WebUIFacade提供简单的接口,Facade是一种面向对象的设计模式。该类提供了几个方法来扩展DataGrid的功能。

       注意:方法SetRowHover需要你有一个名称为gridHover的样式,它是鼠标滑动到当前行时背景色将要变化的颜色。

 

外观类代码

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
 
namespace YourProject.WebApp
{   
    public class WebUIFacade
    {
        
        public WebUIFacade()
        {
            
        }
 
        /// <SUMMARY>
        ///该方法为列标题创建提示.  
        /// 注意: 只有Grid设置为可排序才能使用
        /// </SUMMARY>        
        public void 
           SetHeaderToolTip(System.Web.UI.WebControls.DataGridItemEventArgs e)
        {
            // Is the item type of type header?
            if (e.Item.ItemType == ListItemType.Header)
            {
                string headerText = "";
                // Add the onmouseover and onmouseout
                // attribute to each header item.
                foreach (TableCell cell in e.Item.Cells)
                {
                    try
                    {
                        LinkButton lb = (LinkButton) cell.Controls[0];
                        headerText = "";
 
                        if(lb != null)
                        {
                            headerText = lb.Text;
                        }
                        
                        lb.ToolTip = "Sort By " + lb.Text;
                    }
                    catch{}
                }
            }
        }
    
        /// <SUMMARY>
        /// This method changes the color of the row when the mouse is over it.
        /// Note: You must have a class called gridHover
        ///       that sets the color of the hover row.
        /// </SUMMARY>
        /// <PARAM name="dg">DataGrid</PARAM>
        /// <PARAM name="e">DataGridItemEventArgs</PARAM>
        public void SetRowHover(DataGrid dg, 
            System.Web.UI.WebControls.DataGridItemEventArgs e)
        {
            try
            {
                string className = "";
 
                // Is the item an item or alternating item?
                if((e.Item.ItemType == ListItemType.Item) || 
                    (e.Item.ItemType == ListItemType.AlternatingItem))
                {
                    // Is the itemtype of type item?
                    if (e.Item.ItemType == ListItemType.Item)
                    {
                        className = dg.ItemStyle.CssClass;
                    }
                    else if(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>
        /// This method sets the CssStyle for a link button
        /// contained in the datagrid item, alternatingitem,
        /// or edititem row.  
        /// </SUMMARY>
        /// <PARAM name="e">DataGridItemEventArgs</PARAM>
        public void 
          SetGridLinkButtonStyle(System.Web.UI.WebControls.DataGridItemEventArgs e)
        {
            if(e.Item.ItemType == ListItemType.Item || 
                e.Item.ItemType == ListItemType.AlternatingItem ||
                e.Item.ItemType == ListItemType.EditItem)
            {
                foreach(TableCell cell in e.Item.Cells)
                {
                    try
                    {
                        LinkButton lb = (LinkButton) cell.Controls[0];
        
                        if(lb != null)
                        {
                            lb.CssClass = "GridLink";
                        }
                    }
                    catch{}
                }
            }
        }
 
    }
}

 

变色样式

这就是WebUIFacade.SetRowHover所用到的变色样式。

.gridHover
{
    background-color: #ffffcc;
}

 

DataGrid的代码

为了使用WebUIFacade所提供的方法,必须在DataGridItemCreated事件中实例化外观类。

private void dataGrid_ItemCreated(object sender, 
         System.Web.UI.WebControls.DataGridItemEventArgs e)
{
    // 实例化WebUIFacade.
    WebUIFacade uiFacade = new WebUIFacade();
    
    // 给每一个排序列加提示
    uiFacade.SetHeaderToolTip(e);
    
    uiFacade.SetGridLinkButtonStyle(e);
    
    // 鼠标滑动时设置当前行的背景颜色
    
    uiFacade.SetRowHover(this.dataGrid, e);
}

 

使用代码

1.      Web工程中创建新类,名称为WebUIFacade

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

3.         创建新的页面。

4.         添加DataGrid控件到您的新页面中。

5.         拷贝对应的代码到ItemCreated事件中。

6.  把样式拷贝到您的Css文件中,并且该页面要包含该CSS文件。
阅读全文
0 0

相关文章推荐

img
取 消
img