更好的 DataGrid 列标题工具提示

• 下载演示项目和源代码 - 15.5 KB

引言

我看到了一些关于在 ASP.NET DataGrid 控件上实现列标题工具提示的文章；但是，我对它们都不满意。有些需要一个函数来根据列索引返回工具提示文本，另一些需要启用排序，大多数需要 JavaScript，很少能促进重用。我想，如果可以直接在数据网格列标签上设置一个标签属性来作为列标题工具提示文本，那该多好。

使用代码

在我的示例中，我将仅扩展 System.Web.UI.WebControls.DataGrid 和 System.Web.UI.WebControls.BoundColumn 类；但是，您可以轻松地将此技术应用于所有 DataGrid 列类。所有代码都基于 1.1 Framework，但可以轻松应用于 2.0。

首先，我创建一个名为 CustomBoundColumn 的类，它继承自 System.Web.UI.WebControls.BoundColumn 并公开一个公共字符串属性，该属性将用于保存工具提示文本，称为 HeaderToolTip

using System;
using System.Web.UI.WebControls;

namespace samplewebapp
{ 
    public class CustomBoundColumn : BoundColumn
    {
        private string headerToolTip;
        
        public string HeaderToolTip 
        {
            get {return headerToolTip;}
            set {headerToolTip = value;}
        }
    }
}

现在，我想扩展 System.Web.UI.WebControls.DataGrid 以利用此文本属性。因此，我创建一个名为 CustomDataGrid 的类，它继承自 System.Web.UI.WebControls.DataGrid 并重写 OnItemCreated 方法。这将遍历标题行中的所有 DataGridItem，检查是否有工具提示文本属性，并将该文本作为 HTML 段落元素的标题应用

using System;
using System.Web.UI.WebControls;

namespace samplewebapp
{
    public class CustomDataGrid : DataGrid
    {
        private const string HEADER_TOOLTIP_FORMAT = 
           @"<p title=""{0}"">{1}</p>"; 
        
        protected override void OnItemCreated(DataGridItemEventArgs e) { 
            if(e.Item.ItemType == ListItemType.Header) { 
                for (int i=0;i < e.Item.Cells.Count;i++) { 
                    if (Columns[i] is CustomBoundColumn) { 
                        CustomBoundColumn col = (CustomBoundColumn)Columns[i]; 
                        if (col.HeaderToolTip != null) { 
                            TableCell cell = e.Item.Cells[i]; cell.Text = 
                              String.Format(HEADER_TOOLTIP_FORMAT, 
                                            col.HeaderToolTip, cell.Text);
                        }
                    }
                }
            } 
            //invoke base class method 

            base.OnItemCreated(e);
        }
    }
}

现在，我只需创建一个 ASPX Web 表单，并使用页面顶部的 Register 指令注册我的命名空间作为标签前缀

<%@ Register TagPrefix="cc1" 
    Namespace="samplewebapp" Assembly="samplewebapp" %>

然后，我可以使用我的 CustomDataGrid 和 CustomBoundColumn 类创建一个 DataGrid，并将 HeaderToolTip 属性设置为标签属性

<cc1:CustomDataGrid id="dgTest" 
        style="Z-INDEX: 101; LEFT: 304px; POSITION: absolute; TOP: 56px" 
        runat="server" AutoGenerateColumns="False">
    <Columns>
        <cc1:CustomBoundColumn DataField="ColumnOne" 
          HeaderText="ColumnOne" 
          HeaderToolTip="This is the tooltip for One."></cc1:CustomBoundColumn>
        
        <cc1:CustomBoundColumn DataField="ColumnTwo" 
          HeaderText="ColumnTwo" 
          HeaderToolTip="This is the tooltip for Two."></cc1:CustomBoundColumn>
        
        <cc1:CustomBoundColumn DataField="ColumnThree" 
          HeaderText="ColumnThree" 
          HeaderToolTip="This is the tooltip for Three."></cc1:CustomBoundColumn>
    </Columns>
</cc1:CustomDataGrid>

就是这样，您现在可以将鼠标悬停在列标题文本上以查看该列标题的工具提示。