ASP.NET 扩展 DataGrid UI 特性

扩展 DataGrid UI 特性介绍

ASP.NET DataGrid 服务器控件是一个多功能的控件。该控件以 HTML 表格的形式显示绑定数据。DataGrid 缺少一些关键的 UI 特性。例如，许多显示列表数据的 HTML 表格会在鼠标悬停在行上时更改行的颜色。此外，当列表可以排序时，通常每个列标题都有一个工具提示文本，说明“按此列排序”。本文档展示了如何将这些常用特性集成到 DataGrid 中。

外观模式 (Facade)

为了减少某些接口方法的复杂性和冗余性，我创建了一个名为 WebUIFacade 的外观模式。外观模式是一种面向对象的设计模式，您可以通过它创建一个提供简化接口的类。在外观模式中，有几种方法可以扩展 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
{
    /// <SUMMARY>
    /// Summary description for WebUIFacade.
    /// </SUMMARY>
    public class WebUIFacade
    {
        /// <SUMMARY>
        /// Constructor.
        /// </SUMMARY>
        public WebUIFacade()
        {
            
        }

        /// <SUMMARY>
        /// This method creates a tooltip for the header columns in a datagrid.  
        /// Note:  This should only be used when the grid has sorting enabled.
        /// </SUMMARY>
        /// <PARAM name="e">DataGridItemEventArgs</PARAM>
        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 提供的这些方法，您必须在 DataGrid 的 ItemCreated 事件中实例化外观模式。然后，您就可以访问外观模式公开的可用方法。

private void dataGrid_ItemCreated(object sender, 
         System.Web.UI.WebControls.DataGridItemEventArgs e)
{
    // Create a new WebUIFacade.
    WebUIFacade uiFacade = new WebUIFacade();
    
    // This is gives a tool tip for each
    // of the columns to sort by.
    uiFacade.SetHeaderToolTip(e);
    
    
    // This sets a class for the link buttons in a grid.
    uiFacade.SetGridLinkButtonStyle(e);
    
    // Make the row change color when the mouse hovers over.
    // *** You must have a class called gridHover with a different background 
    // color in your StyleSheet.
    uiFacade.SetRowHover(this.dataGrid, e);
}

Using the Code

1. 在 Web 项目中创建一个名为 WebUIFacade 的新类。
2. 复制 WebUIFacade 的代码并将其粘贴到您的类中。确保命名空间与您的网页的命名空间相同。如果不同，请在您的网页引用中包含外观模式。
3. 创建一个新的网页。
4. 将一个 DataGrid 添加到页面并将其命名为 dataGrid。
5. 复制 ItemCreated 事件中的代码并将其放置在您网页的代码隐藏文件中。确保 DataGrid 触发该事件。
6. 将样式添加到 CSS 文件并在您的网页中包含它，或者将样式添加到您网页的头部。